/*
Theme Name: ystandard child
Version: 1.0
Template: ystandard
*/


.post-index__title {
	font-size: 32px;
  text-align: center;
  margin: 0 0 32px;
}
@media screen and (max-width: 767px) {
  .post-index__title {
    font-size: 24px;
  }
}

table td:nth-of-type(1){
  white-space: nowrap;
}


/* TOP > 制作実績の余白調整 */
.archive__container.is-card {
  padding-left: 0;
}
/* カバー画像の表示位置修正 */
.topCover-fix {
  padding:0 0 calc(321/1082*100%) ;
  min-height: 0;
}
.topCover-fix .wp-block-cover__background{
  position: absolute;
  padding: 0;
  top: 40%;
}

/* ========================================================
   カラーパレットの追加
=========================================================*/
/* 文字色 */
.has-color1-color {
	color: #958a8a;
}
.has-color2-color {
	color: 616371;
}

/* ========================================================
   見出しスタイル
=========================================================*/
/* 見出しが見きれないために余白を確保 */
#main {
  padding: 12px 0 0;
}
/*H1見出し*/
main h1[class*="title"] {
    color: #616371;/*文字色（黒）*/
    background-color: #fff;/*背景色（白）*/
    font-size: 20px;/*文字サイズ*/
    padding: 20px 30px;/*文字回りの余白（上下 左右）*/
    display: block;
    border: 1px solid #958a8a;/*囲み線（太さ 実線 色）*/
    position: relative;
    text-align: left;
}
main h1[class*="title"]:before,
main h1[class*="title"]:after {
  content: "";
    display: block;
    position: absolute;
    width: 20px;/*左右四角の幅*/
    height: 20px;/*左右四角の高さ*/
    border: 1px solid #958a8a;/*囲み線（太さ 実線 色）*/
}
main h1[class*="title"]:before {
    left: -10px;
    top: -10px;}
main h1[class*="title"]:after {
    right: -10px;
    bottom: -10px;
}

/*H2見出し*/
main h2.wp-block-heading {
    color: #616371;/*文字色*/
    font-size: 18px;/*文字サイズ*/
    margin: 3em 0 2em;
    padding: 10px 20px;/*文字回りの余白（上下 左右）*/
    display: block;
    border-left: 6px solid #958a8a;/*二重線左側（太さ 実線 色）*/
    position: relative;
}
main h2.wp-block-heading:before {
    content: "";
    display: block;
    position: absolute;
    left: 3px;
    top: 0;
    width: 2px;/*二重線右側の太さ（幅）*/
    height: 100%;
    background: #958a8a;/*二重線右側の色*/
}
/*H3見出し*/
main h3.wp-block-heading {
    color: #616371;/*文字色*/
    font-size: 16px;
    display: block;
    position: relative;
    padding: 15px 30px;
}
main h3.wp-block-heading:before {
    font-family: FontAwesome;
    font-weight: 900;/*矢印の太さ*/
    font-size: 28px;/*矢印のサイズ*/
    color: #958a8a;/*文字色（黒）*/
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content:"\f101";
    position: absolute;
}

/* ========================================================
   使用ツール一覧
=========================================================*/
/* .tool-type-groups { margin-top: 1.5rem; }
.tool-type-row { display:flex; align-items:flex-start; gap:.75rem; margin:.66rem 0; }
.tool-type__icon { width:28px; height:28px; object-fit:contain; display:inline-flex; }
.tool-type__icon--preset { font-size:20px; line-height:1; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; background:#f6f7f8; border-radius:6px; }
.tool-type__body { flex:1; }
.tool-type__line { font-size:1rem; }
.tool-type__name { font-weight:700; }
.tool-type__sep { margin:0 .25em; color:#999; }
.tool-type__tools { color:#444; }
.tool-type__desc { margin:.25rem 0 0; color:#666; font-size:.9rem; } */

.tool-type-row { display:flex; align-items:flex-start; gap:.75rem; margin:.66rem 0; }
.tool-type__icon { width:28px; height:28px; object-fit:contain; display:inline-flex; }
.tool-type__icon--preset { font-size:20px; line-height:1; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; background:#f6f7f8; border-radius:6px; }
.tool-type__body { flex:1; }
/* 名前カラムの幅（必要に応じて調整） */
.tool-type-groups { --name-col: 12em; }

/* 1行を3カラムに分割： [名前] [区切り] [ツール列挙] */
.tool-type__line{
  display:grid;
  grid-template-columns: var(--name-col) 1.25em 1fr;
  align-items: baseline;
  column-gap:.25rem;
}

/* 体裁調整 */
.tool-type__name{ font-weight:700; white-space:nowrap; }
.tool-type__sep{ text-align:center; color:#999; }
.tool-type__tools{ color:#444; }
.tool-type__desc { margin:.25rem 0 0; color:#666; font-size:.9rem; }

/* モバイルは縦積みに（始点を揃えるより可読性優先） */
@media (max-width: 520px){
  .tool-type__line{
    grid-template-columns: 1fr;
  }
  .tool-type__sep{ display:none; }
  .tool-type__tools::before{
    content: "：";
    margin-right: .25em;
    color:#999;
  }
}

/* ========================================================
   カスタム投稿タイプ　Skills
=========================================================*/
.post-type-archive-skills .archive__container.is-card {
  row-gap: 2.5em;
}
.post-type-archive-skills .tool__list {
  list-style-type: none;
}

.archive__title-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.3em;
}
.skill-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.skill-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: middle;
}
.skill-title {
  margin: 0;
}
.skill-level-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 0.18em;
}
.skill-level-gauge {
  display: inline-block;
  width: 70px;
  height: 10px;
  background: #eee;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.skill-level-bar {
  display: block;
  height: 100%;
  background: #2a7ae2;
  border-radius: 5px;
}
.skill-level-label {
  font-size: 0.97em;
  color: #2a7ae2;
}
.skill-note {
  font-size: 0.93em;
  color: #666;
}

/* ========================================================
   フッター
=========================================================*/
.footer-main {
    padding-top: 2em;
}

/* メインビジュアルのスタイル */
.hero-main {
    width: 100%;
    max-width: 1200px; /* 画面の横幅いっぱい */
    margin: 0 auto;
    padding: 0;
    overflow: hidden; /* はみ出し防止 */
}

.hero-main img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 6; /* アスペクト比16:9を維持 */
    object-fit: contain; /* 画像を枠に合わせてトリミング */
    display: block; /* 下に余白ができるのを防ぐ */
}