/*
Theme Name: Blocksy Child
Template: blocksy
Version: 1.0.0
*/

body {
  margin: 0;
}

/* フル幅コンテナの上下余白を消す */
.ct-container-full {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Elementor 全体の上下 padding をリセット */
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* =========================================
   グローバルメニュー
   target: .umadesign-global-menu
   ========================================= */
.umadesign-global-menu {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center; 
  font-weight: 600;
  letter-spacing: .08em; /* お好みで調整 */
}

/* liを相対位置に */
.umadesign-global-menu > li {
  position: relative;
  padding-right: 20px; /* 線との間隔 */
}

/* 区切り線（最後以外） */
.umadesign-global-menu > li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;          /* ← 線の太さ（ここ！） */
  height: 1em;         /* 線の高さ */
  background-color: #222;
}


/* リンクスタイル */
.umadesign-global-menu a {
  text-decoration: none;
  color: #111;
  font-size: 15px; /* 調整可 */
}

/* hover */
.umadesign-global-menu a:hover {
  color:#ffb400;
}

/* 現在のページの項目（アクティブ） */
.umadesign-global-menu .current-menu-item > a,
.umadesign-global-menu .current_page_item > a {
  color: var(--bs-primary, #ffb400); /* アクティブ色に変更（必要なら直接色を入れてOK） */
  font-weight: 700;
}

/* モバイルで非表示にする（必要なら） */
@media (max-width: 768px) {
  .umadesign-global-menu { display: none; }
}

/* =========================================
   ポートフォリオ用メニュー
   target: .pheader
   ========================================= */
.pheader {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 277px;
  background-image: url("http://u-ma-design.com/wp-content/uploads/2025/12/HeaderBack_blue.svg");
  background-repeat: no-repeat;
  padding: 45px 20px 0px 50px;
}

.pheader__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
}

/* Left Column */
.pheader__left{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-left: 50px;
}
.pheader__left > *{
  position: relative;

}
.pheader__brand,
.pheader__nav--global {
  position: relative;
  z-index: 1;
}

/* ロゴ（もう少し小さめ＆上余白調整） */
.pheader__brand img.custom-logo {
  width: 68px;
  height: auto;
  display: block;
  margin: 0 0 26px;
}

/* グローバルメニュー（完成イメージは広め） */
.pheader__menu--global {
  display:flex;
  gap:0;
  padding:0;
  margin:0;
  list-style:none;
  justify-content:center;
}
.pheader__menu--global li{
  display:flex;
  align-items:center;
  margin:0;
}

.pheader__menu--global li + li::before{
  content:" | ";
  display:inline-block;
  margin:0 10px;
  color:#000;
  opacity:.9;
}
.pheader__menu--global a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color:#000;
}

.pheader__menu--global a:hover {
  color:#ffb400;
}

/* RIGHTColumn */
.pheader__right {
  margin-left: auto;
  margin-top: 50px;
}

/* PORTFOLIO */
.pheader__title {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 26px; /* Gap to submenu */
  letter-spacing: 0.05em;
  text-align: center;
}

/* カテゴリメニュー */
/* 右メニュー */
.pheader__menu--portfolio {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 文字と線の間隔は li の padding で統一 */
.pheader__menu--portfolio li {
  display: flex;
  align-items: center;
  padding: 0 16px;          /* ← 文字と線の距離（ここで統一） */
  position: relative;
}

/* 線は「右側だけ」に付ける（これで重ならない） */
.pheader__menu--portfolio li::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;               /* ← 太さ */
  height: 1.0em;            /* ← 高さ */
  background-color: #0f172a;
}

/* 両端にしたい場合：左端の線だけ ul に付ける */
.pheader__menu--portfolio::before {
  content: "";
  width: 2px;
  height: 1.0em;
  background-color: #0f172a;
  display: inline-block;
}

.pheader__menu--portfolio a {
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #0f172a;
}

.pheader__menu--portfolio a:hover {
  color:#ffb400;
}

/* 左の大画像エリア：縦基準で収める */
.portfolio-image .portfolio-swiper {
  width: 103%;
  height: 520px;            /* ←ここを好みで調整（例 480〜650） */
  border-radius: 12px;
  overflow: hidden;
}

/* スライド・画像を「高さに合わせて」収める */
.portfolio-image .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-image .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* ←縦に揃えて全体が見える（切れない） */
  display: block;
}

@media (max-width: 768px) {
  .portfolio-image .portfolio-swiper {
    height: 360px;
  }
}

/* =========================================
   フッター用メニュー
   target: .footer-menu
   ========================================= */
.footer-menu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;              /* メニュー間隔 */
  list-style: none;
  padding: 0;
}

.footer-menu a {
  text-decoration: none;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.footer-menu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  list-style: none;
}

.footer-menu li {
  position: relative;
  padding-right: 24px; /* 線のための余白 */
}

/* 区切り線（縦線） */
.footer-menu li::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;          /* ← 線の太さ */
  height: 12px;        /* ← 線の高さ */
  background-color: #000; /* ← 線の色 */
}

/* 最後の項目は線を消す */
.footer-menu li:last-child::after {
  display: none;
}


/* =========================================
   ポートフォリオ用個別カード
   post type: portfolio_contents
   ========================================= */

.portfolio-content-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
}

.portfolio-term {
  position: relative;
  font-weight: 700;
  margin: 0 0 18px;
  font-size: 35px;
  color: #000000;
  display: inline-block;
}

/* 黄色の丸（背景） */
.portfolio-term::before {
  content: "";
  position: absolute;
  top: -15%;
  left: -10%;
  width: 56px;
  height: 56px;
  background-image: url("https://u-ma-design.com/wp-content/uploads/2025/12/Title01.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: -1; /* ← 文字の後ろに回す */
}


/* 白いカード */
.portfolio-card{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 32px;
}

.portfolio-layout{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
}

/* 画像 */
.portfolio-thumbnail{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.portfolio-image,
.portfolio-meta{
  min-width: 0;
}
/* 右側 */
.portfolio-meta{
  font-size: 15px;
  line-height: 1.8;
}

/* タイトルをカード内に */
.portfolio-meta .portfolio-title{
  margin: 0 0 18px;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: .02em;
}

/* メタ行 */
.portfolio-meta-row{
  margin: 0 0 10px;
}

.portfolio-meta-label{
  font-weight: 700;
  margin-right: 6px;
}


/* portfolio_contents詳細ページではBlocksy標準ヘッダーを非表示 */
body.single-portfolio_contents header#header,
body.single-portfolio_contents .ct-header {
  display: none !important;
}

/* コメント（カード内） */
body.single-portfolio_contents .portfolio-comment{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0);
}

body.single-portfolio_contents .portfolio-comment-title{
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 10px;
}

body.single-portfolio_contents .portfolio-comment-body p{
  margin: 0 0 10px;
}

body.single-portfolio_contents .portfolio-comment-body p:last-child{
  margin-bottom: 0;
}

/* 前後ナビ */
body.single-portfolio_contents .portfolio-navigation{
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
}

body.single-portfolio_contents .portfolio-navigation a{
  text-decoration: none;
  font-weight: 700;
}

/* gridの中で横はみ出しを防ぐ（これ重要） */
.portfolio-image .swiper,
.portfolio-image .swiper-wrapper,
.portfolio-image .swiper-slide {
  background: transparent !important;
}

.portfolio-image .swiper-slide img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  position: relative !important;
  z-index: 5 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* 矢印色 */
body.single-portfolio_contents .portfolio-image .swiper-button-next,
body.single-portfolio_contents .portfolio-image .swiper-button-prev{
  color: #31C2F5; 
}

/* ページャー（アクティブ） */
body.single-portfolio_contents
.portfolio-image
.swiper-pagination-bullet-active {
  background-color: #31C2F5;   /* ← 好きな色に */
}

@media (max-width: 780px){
  body.single-portfolio_contents .portfolio-card{ padding: 22px; }
  body.single-portfolio_contents .portfolio-layout{
    grid-template-columns: 1fr;
  }
}


/* =========================================
   投稿カードのデザイン
   target: .eael-post-grid
   ========================================= */
.eael-post-grid {
  margin-top: 0px;
}

/* === カード幅 & 間隔 === */
.eael-post-grid .eael-post-grid-column {
  width: calc(30% - 26px);
  margin-right: 20px;
}

.eael-post-grid .eael-post-grid-column:nth-child(3n) {
  margin-right: 0;
}

/* =========================================
   ポートフォリオメニューカード
   target: .eael-grid-post
   ========================================= */
.eael-grid-post {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.eael-grid-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* === 画像 === */
.eael-entry-media img {
  width: 100%;
  display: block;
	padding: 20px 20px 0 20px;
}

/* 画像の枠（高さ固定） */
.eael-post-grid .eael-entry-media{
  height: 260px;                 /* ← 好きな高さに調整（例: 220〜320） */
  padding: 20px 20px 0;          /* 既存デザインを維持したい場合 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f7f7f7;           /* 余白が出るので薄い背景（不要なら消してOK） */
}

/* 画像は枠の中に「縦基準」で収める */
.eael-post-grid .eael-entry-media img{
  padding: 0 !important;         /* 既存の img 側 padding を無効化 */
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  display: block;
}

.eael-grid-post .eael-entry-wrapper{
	padding: 20px;
}

/* === カテゴリラベル === */
.eael-entry-meta a {
  display: inline-block;
  background: #f4c430;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 10px;
}

/* === タイトル === */
.eael-entry-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 14px;
}

/* === 本文 === */
.eael-entry-content {
  font-size: 14px;
  line-height: 1.6;
  color: #000;
	padding-top: 20px;
}


/* === モバイル === */
@media (max-width: 768px) {
  .eael-post-grid .eael-post-grid-column {
    width: 100%;
    margin-right: 0;
    margin-bottom: 24px;
  }
}

/* =========================================
   ポートフォリオカテゴリ用
   target: .pgrid
   ========================================= */
.pgrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}

/* Card */
.pcard{
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.pcard:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.pcard__link{
  display: block;
  color: inherit;
  text-decoration: none;
}

.pcard__thumb{
height: 240px;                 /* ← 好きな高さに調整（例: 220〜320） */
  padding: 0 20px;          /* 既存デザインを維持したい場合 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #e3e3e3;
}

.pcard__thumb img{
  padding: 0 !important;         /* 既存の img 側 padding を無効化 */
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  display: block;
}

.pcard__body{
  padding: 16px 18px 18px;
}

/* Badge（カテゴリラベル） */
.pcard__badge{
  display: inline-block;
  background: #f4c430;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}

/* Title / excerpt */
.pcard__title{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px;
}

.pcard__excerpt{
  font-size: 14px;
  line-height: 1.6;
  color: #000;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* ← 2行でカット（約15〜18文字） */
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.6em * 2);
}


/* レスポンシブ */
@media (max-width: 1024px){
  .pgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 640px){
  .pgrid{ grid-template-columns: 1fr; gap: 20px; }