/*
  Skin Name: エイト精工株式会社サイトデザインスキン
  Description: スリーアローズが制作するエイト精工株式会社のサイトデザインです。
  Author: 株式会社スリーアローズ
  Author URI:https://3-arrows.co.jp/ 
  Version: 1.0.0
  Priority: 10
*/
/*以下にスタイルシートを記入してください*/

/**************************************************
** 公開サイトカスタマイズ
**************************************************/
:root {
	--main-color: #8c0026;      /* サイトメインカラー（えんじ） */
	--base-color: #eed9de;      /* ベースカラー（薄い） */
	--accent-color: #d4af37;    /* アクセントカラー（ゴールド） */
	--textbase-color: #333333;  /* 基本文字色 */
	--white-color: #ffffff;     /* 白 */
}

/**************************************************
**
** 全体
**
**************************************************/

/* サイト全体 */
html, body {
  overflow-x: hidden;
}
.body {
  background-color: var(--white-color);
  scroll-behavior: smooth;
}

/**************************************************
**
** ヘッダー
**
**************************************************/

/* ヘッダーサイズ指定 */
.body .header-in {
  height: 80px;
}
/* 最終更新日表示 */
#esk-header-date {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 14px;
}

/**************************************************
** ヘッダーロゴデザイン
**************************************************/

/* サイト名表示エリア */
.logo-text {
  line-height: 1;
  padding: 0;
}
/* サイト名デザイン */
.header .site-name-text {
  color: var(--main-color) !important;
  font-weight: bold;
}
/* サイト名サイズ */
.header-container #header .site-name-text {
  font-size: clamp( 22px, 4.5vw, 30px );
  line-height: 1;
}

/**************************************************
** グローバルナビ
**************************************************/

/* ナビテキスト */
.body .navi-in a {
  color: var(--textbase-color);
  font-weight: bold;
}
/* ナビ下線 (初期状態は透明) */
#navi .navi-in a:after {
	position: absolute;
	content: "";
	left: 5%;
	bottom: -8px;
	height: 8px;
	width: 90%;
	background: transparent;
}
/* カレントのナビ下線（フロントページ以外） */
.body:not(.home) #navi .navi-in .current-menu-item a:after {
	background: var(--accent-color);
}
/* ナビメニューデザイン（ホバー時） */
#navi .navi-in a:hover {
  background-color: var(--main-color);
  color: var(--white-color) !important;
  transition: background-color 0.5s ease, color 0.5s ease;
}
/* ホバー時、カレントのナビ下線を消します */
.body:not(.home) #navi .navi-in .current-menu-item a:hover::after {
  background-color: transparent;
}

/**************************************************
**
** フッター
**
**************************************************/

/* フッター全体 */
.footer {
  margin: 0;
  padding: 0;
}
/* フッター内部 */
.footer-in {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 16px 0;
}

/**************************************************
** フッターナビ
**************************************************/

/* メニュー＆クレジットエリア */
.footer-bottom {
  margin-top: 0;
  padding: 0;
}
/* ナビメニューデザイン（ホバー時） */
.navi-footer-in a:hover {
  color: var(--main-color) !important;
}

/**************************************************
**
** モバイルメニューカスタマイズ
**
**************************************************/

/* モバイルメニュー */
ul.mobile-menu-buttons,
ul.mobile-menu-buttons .menu-button > a {
  color: var(--main-color);
}
/* モバイルの検索ボタンを消す ※mobilenavで制御するため削除*/
/*ul.mobile-menu-buttons li.search-menu-button {
  display: none;
}*/

/**************************************************
**
** 部品カスタマイズ
**
**************************************************/

/**************************************************
** トップへ戻るボタン
**************************************************/

/* 表示位置調整 */
.go-to-top {
  right: 24px;
  bottom: 24px;
}
/* トップへ戻るボタンデザイン */
.go-to-top-button-icon-font {
  border: 1px solid var(--main-color);
  border-radius: 50%;
}

/**************************************************
** 一般ボタンカスタマイズ
**************************************************/

/* ボタンデザイン */
div.wp-block-buttons > div.wp-block-button a {
  padding: 0.5em 3em;
  border-color: var(--main-color);
  font-weight: bold;
  color: var(--main-color) !important;
  background-color: var(--white-color) !important;
  transition: background-color 0.5s ease, color 0.5s ease;
  position: relative;
}
/* ボタンに矢印をつける */
div.wp-block-buttons > div.wp-block-button a::after{
  content: "→";
  position: absolute;
  right: -0.7em;
  top: 50%;
  color: var(--main-color);
  transform: translateY(-50%);
}
/* ボタンデザイン（ホバー時） */
div.wp-block-buttons > div.wp-block-button a:hover {
  background-color: var(--main-color) !important;
  color: var(--white-color) !important;
}

/**************************************************
** テーブルカスタマイズ
**************************************************/

/* テーブル背景色を初期化 */
table tr {
  background-color: unset !important;
}
/* テーブルセル設定 */
.body table :where(tr, td) {
  border-color: #ccc !important;
  padding: 0.5em 1em;
}
/* テーブルは横幅いっぱいに表示する */
figure.wp-block-table table {
  width: 100%;
}
/* テーブル見出しは折り返しなし */
figure.wp-block-table table tr td:first-child {
  width: 18%;
  white-space: nowrap;
}

/**************************************************/
/* スペーサー（基本1.6rem）
/**************************************************/

div.my-responsive-spacer {
  height: 1.6rem !important;
}

/**************************************************/
/* 区切り線
/**************************************************/

.my-hr-style {
  margin-top: 3.2em;
}

/**************************************************/
/* リスト
/**************************************************/

/* マークなしリスト */
ul.my-nomark-style {
  list-style: none;
}
/* マークを消した分、左にずらす */
ul.my-nomark-style li {
  margin-left: -1rem;
}

/**************************************************
** Googleマップ埋め込みサイズ調整
**************************************************/

/* マップエリア全体 */
.my-map-container {
  position: relative;
  width: 100%;            /* 親要素の幅に合わせる */
  padding-bottom: 56.25%; /* 16:9 のアスペクト比を維持するための割合 */
  height: 0;
  overflow: hidden;
  margin-bottom: 0.6rem !important;
}
/* Googleマップ埋め込みフレーム */
.my-map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;              /* ボーダーを削除 */
}

/**************************************************
** 改行
**************************************************/

/* モバイル以外は改行しない */
br.mobile-only {
  display: none;
}

/**************************************************
**
** ページ共通カスタマイズ
**
**************************************************/

/* 固定ページ全体（404含む） */
.body.error404 .main,
.body.page .main {
  display: block;
  padding: 32px 32px 0;
}
/* 全体の余白設定 */
.body .main > .article {
  margin-top: 2em;
  margin-bottom: 5em;
}
/* 固定ページの投稿日を消す */
.page .date-tags {
	display: none;
}

/**************************************************
**
** フロントページ(固定ページ)
**
**************************************************/

/* フロントページはページ情報を表示しない */
.front-top-page.page .article-header {
  display: none;
}
/* フロントページは投稿者情報を表示しない */
.front-top-page .article-footer {
  display: none;
}

/**************************************************
** フロントページ見出し
**************************************************/

/* フロントページ見出し見出しデザイン */
#esk-topservice h2,
#esk-toprecruit h2,
#esk-topcompany h2 {
  color: var(--textbase-color);
  line-height: 1;
  font-size: 28px;
}
#esk-topservice h2::before,
#esk-toprecruit h2::before,
#esk-topcompany h2::before {
  content: '';
  display: inline-block;
  transform: skewX(-40deg) translateX(50%);
  vertical-align: middle;
  background-color: var(--accent-color);
  width: 6px;
  height: 20px;
  margin: -6px 16px 0 6px;
}

/**************************************************
** トップメッセージセクション
**************************************************/

/* セクション全体 */
div#esk-topmessage {
  margin-bottom: 0;
  padding-bottom: 3em;
}
/* トップメッセージデザイン・強調 */
.front-top-page.page .my-first-headline {
  font-size: 28px;
}
/* トップメッセージデザイン・アンダーライン */
.front-top-page.page .my-first-headline strong {
  background: linear-gradient(transparent 70%, rgba(212, 175, 55, 0.5) 70%);
}

/**************************************************
** 金型製造セクション
**************************************************/

/* セクション全体 */
div#esk-topservice {
  background-color: transparent;
  border-image-source: linear-gradient(var(--base-color),var(--base-color));
  border-image-slice: fill 0;
  border-image-width: 1;
  border-image-outset: 0 100vw;
  border-image-repeat: stretch;
  margin-bottom: 0;
  padding-top: 2em;
  padding-bottom: 2em;
}
/* 金型製造カラム背景色 */
#esk-topservice div.wp-block-column {
  background-color: var(--white-color);
}
/* 金型製造見出し・共通(1) */
#esk-topservice h3 {
  font-size: 20px;
  text-shadow: 2px 2px 16px rgba(255, 255, 255, 0.9); /* シャドウの設定 */
  display: flex;
  align-items: center;
  padding-left: 1em;
  height: 160px;
  background-image: url('/wp-content/uploads/2025/02/img-bg-cat3.png');
  background-size: cover;
  background-position: 0 0;
}
/* 金型製造見出し(2) */
#esk-topservice div.wp-block-column:nth-child(2) h3 {
  background-image: url('/wp-content/uploads/2025/02/img-bg-cat1.png');
}
/* 金型製造見出し(3) */
#esk-topservice div.wp-block-column:nth-child(3) h3 {
  background-image: url('/wp-content/uploads/2025/02/img-bg-cat2.png');
}
/* 金型製造テキスト */
#esk-topservice div.wp-block-column p {
  padding: 0 1rem 3rem;
}
/* セクション区切り装飾 */
.shapedividers_mysectionTop,
.shapedividers_mysectionBottom {
  overflow: hidden;
  position: relative;
  margin: 0 calc(50% - 50vw) !important;
  width: 100vw;
  height: 90px;
}
/* 上側の区切り */
.shapedividers_mysectionTop::before { 
  content:'';
  font-family:'shape divider from ShapeDividers.com';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw; 
  background-size: 100% 90px;
  background-position: 50% 100%;
  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 381 77.25" preserveAspectRatio="none"><g fill="%23eed9de"><path d="M0 68.78l381-33.86v42.33H0z"/><path d="M0 43.38l381-25.4v59.27H0z" opacity=".33"/><path d="M0 17.98L381 0v77.25H0z" opacity=".33"/></g></svg>');
}
/* 下側の区切り */
.shapedividers_mysectionBottom::before { 
  content:'';
  font-family:'shape divider from ShapeDividers.com';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw; 
  background-size: 100% 90px;
  background-position: 50% 0%;
  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 381 77.25" preserveAspectRatio="none"><g fill="%23eed9de"><path d="M381 8.47L0 42.33V0h381z"/><path d="M381 33.87L0 59.27V0h381z" opacity=".33"/><path d="M381 59.27L0 77.25V0h381z" opacity=".33"/></g></svg>'); 
}

/**************************************************
** 採用情報・会社案内セクション
**************************************************/

/* セクション全体 */
#esk-toprecruit .wp-block-media-text,
#esk-topcompany .wp-block-media-text {
  background-color: var(--base-color);
}

/**************************************************
**
** アピールエリアカスタマイズ
**
**************************************************/

/* アピールエリアの画像を中央にトリミング表示 */
.appeal {
  background-size: cover;       /* 画像を比率を維持したままエリア全体にフィットさせる */
  background-position: center;  /* 画像を中央に配置 */
  height: 100%;                 /* 高さをエリアに合わせる */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  margin-top: 16px;
  position: relative;
  overflow: hidden;
}
/* 左上端に三角形の飾りを追加 */
.appeal::before {
  content: '';
  position: absolute;
  top: -240px;
  left: 0;
  width: 0;
  height: 0;
  border-right: 240px solid transparent; /* 三角形の底辺の幅 */
  border-top: 240px solid var(--accent-color); /* 三角形の高さと色 */
  opacity: 0.5;
  animation: moveTriangleTop 1s ease-in-out 0s 1 forwards;
}
/* 右下端に三角形の飾りを追加 */
.appeal::after {
  content: '';
  position: absolute;
  bottom: -240px;
  right: 0;
  width: 0;
  height: 0;
  border-left: 240px solid transparent; /* 三角形の底辺の幅 */
  border-bottom: 240px solid var(--main-color); /* 三角形の高さと色 */
  opacity: 0.5;
  animation: moveTriangleBottom 1s ease-in-out 0.5s 1 forwards;
}
/* アピールテキスト */
.appeal-content {
  opacity: 0;
  animation: fadeinAppealText 2s ease-in-out 1.5s 1 forwards;
}

/**************************************************
** アピールエリアアニメーション
**************************************************/
@keyframes moveTriangleTop {
  0% {
    top: -240px;
  }
  100% {
    top: 0;
  }
}
@keyframes moveTriangleBottom {
  0% {
    bottom: -240px;
  }
  100% {
    bottom: 0;
  }
}
@keyframes fadeinAppealText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/**************************************************
**
** 下層ページ（固定ページ）
**
**************************************************/

/* タイトル上の余白をすべて消す */
.body:not(.home) .content,
.body:not(.home).page .main,
.body:not(.home) .main > .article {
  margin-top: 0;
  padding-top: 0;
}
/* タイトルデザイン */
.body:not(.home) .entry-title {
  padding: 2em 0;
  text-align: center;
  color: var(--white-color);
  background-color: transparent;
  border-image-source: linear-gradient(var(--main-color),var(--main-color));
  border-image-slice: fill 0;
  border-image-width: 1;
  border-image-outset: 0 100vw;
  border-image-repeat: stretch;
  letter-spacing: 0.12em;
  margin-bottom: 3.2rem;
}

/**************************************************
**
** 記事ヘッダー
**
**************************************************/

/* 記事ヘッダーエリア */
.body:not(.archive) .article-header {
  margin-bottom: 32px;
}
/* タイトルデザイン */
.body .entry-title {
  font-size: 28px;
  color: var(--textbase-color);
}

/**************************************************
**
** 記事見出し
**
**************************************************/

/* 見出し共通デザイン */
.body .article :is(h2, h3, h4, h5, h6) {
  background-color: transparent;
  border: none;
  padding: 0;
  margin-bottom: 1.6rem;
  letter-spacing: 0.05em;
}
/* 横並びカラム内の見出しは上マージンなし */
.article .wp-block-column h3 {
  margin-top: 0;
}
/* フロントページ以外の見出しデザイン */
body:not(.home) .article h2 {
  background-color: var(--base-color);
  padding: 24px 16px;
  line-height: 1;
  border-left: 10px solid var(--main-color);
  color: var(--textbase-color);
}

/**************************************************
**
** 各ページのカスタマイズ
**
**************************************************/

/**************************************************
** 会社案内ページカスタマイズ
**************************************************/

/* 役職と署名画像を中央揃えにする */
#esk-greeting .my-signature-block {
  align-items: center;
  gap: 0.5rem;
}
/* 署名の下マージンをなくす */
#esk-greeting .my-signature-block p {
  margin-bottom: 0;
}

/**************************************************
** 金型製造ページカスタマイズ
**************************************************/

/* 金型製造ページの見出し */
#esk-servics h4 {
  position: relative;
  display: inline-block;
}
#esk-servics h4::before {
  content: "";
  position: absolute;
  display: inline-block;
  background-color: var(--accent-color);  /* 背景色をゴールドに設定 */
  opacity: .7;
  border-radius: 50%;                     /* 円形にする */
  width: 2em;                             /* 円形の幅を設定 */
  height: 2em;                            /* 円形の高さを設定 */
  left: -0.6em;                           /* 左にずらす */
  top: -0.5em;
  z-index: -1;
}
/* 各金型の特徴ブロック */
#esk-servics .my-feature-block {
  margin: 0 3rem;
}
/* 事例紹介ブロック */
#esk-case div.my-responsive-spacer {
  height: 1.5rem !important;
}

/**************************************************
** お問い合わせページカスタマイズ
**************************************************/

/* 連絡先セクション */
#esk-contact .contact-column {
  padding: 0 2rem;
}
/* 連絡先を枠で囲む */
#esk-contact .contact-column .wp-block-column {
  border: 1px #ccc solid;
  padding: 1.6rem 0;
}
/* 受付時間と電話番号を垂直中央揃え */
#esk-contact .contact-column .wp-block-group {
  align-items: center;
}
/* 垂直中央揃え調整 */
#esk-contact .contact-column .wp-block-group > p:first-child {
  margin: 4px 0 0;
}
/* 電話番号とメールアドレスを強調する */
#esk-contact .contact-column strong {
  font-size: 1.6rem;
}
/* アイコンカラーカスタマイズ */
div#esk-access .iconlist-box ul li::before {
	color: var(--main-color);
}

/**************************************************
**
**  レスポンシブ
**
**************************************************/

/* 2100px以上 */
@media (min-width:2100px){
  /* スライドショー区切り装飾を大きくする */
  .shapedividers_myslide::before {
    background-size: 100% calc( 2vw + 40px );
  }
  /* フロントページ金型製造セクション上側の区切り装飾 */
  .shapedividers_mysectionTop::before{
    background-size: 100% calc(2vw + 90px);
  }
  /* フロントページ金型製造セクション下側の区切り装飾 */
  .shapedividers_mysectionBottom::before{
    background-size: 100% calc(2vw + 90px);
  }
}

/* 1023px以下 */
@media screen and (max-width: 1023px){
}

/* 834px以下 */
@media screen and (max-width: 834px){
  /******************************
  ** タブレットではカラムを横並べ
  ******************************/
  /* フロントページ・金型製造セクションのカラム */
  /* 会社案内ページ・会社概要セクションのカラム */
  /* 金型製造ページ・実績紹介セクションのカラム */
  /* 採用情報ページ・職場紹介セクションのカラム */
  #esk-topservice .wp-block-columns,
  #esk-profile .wp-block-columns,
  #esk-case .wp-block-columns,
  #esk-work-environment .wp-block-columns {
    flex-direction: row;
    flex-wrap: nowrap !important;
  }
  /******************************
  ** 調整
  ******************************/
  /* フロントページ・採用情報セクションのカラム余白※モバイルでは相殺 */
  #esk-toprecruit.wp-block-column {
    margin-bottom: 1.6rem;
  }
  /* フロントページ・金型製造見出しの画像位置調整 */
  #esk-topservice h3 {
    background-position: -32px 0;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px){
  /******************************
  ** 調整
  ******************************/
  /* 固定ページ全体（404含む） */
  .body.error404 .main,
  .body.page .main {
    padding: 32px 16px 0;
  }
  /* ボタンデザイン */
  div.wp-block-buttons > div.wp-block-button a {
    padding: 0.5em 1em;
  }
  /* メディアとテキスト余白調整 */
  .wp-block-media-text__content {
    padding: 1.6rem 0.8rem !important;
  }
  /* テーブルセル設定 */
  .body table :where(tr, td) {
    padding: 0.5em 0.6em;
  }
  /* タイトルデザイン */
  .body .entry-title {
    font-size: 24px;
  }
  /* 最終更新日 */
  #esk-header-date {
    top: 0;
    right: 4px;
    font-size: 12px;
  }
  /* モバイルのみ改行 */
  br.mobile-only {
    display: inline;
  }
  /* アイコンリストボックスの表示幅を広げる */
  .blank-box {
    padding: 0;
  }
  /* フロントページ・見出しデザイン */
  #esk-topservice h2,
  #esk-toprecruit h2,
  #esk-topcompany h2 {
    font-size: 22px;
  }
  /* フロントページ・トップメッセージ */
  .front-top-page.page .my-first-headline {
    font-size: 22px;
  }
  /* フロントページ・金型製造見出しの画像位置調整 */
  #esk-topservice h3 {
    background-position: 0 0;
  }
  /* 金型製造ページ・実績紹介（成型品）セクションのカラム */
  #esk-case .wp-block-columns {
    margin-bottom: 0;
  }
  /* お問い合わせページ・連絡先ブロックの表示幅を広げる */
  #esk-contact .contact-column {
    padding: 0;
  }
  /* お問い合わせページ・強調テキストサイズ調整 */
  #esk-contact .contact-column strong {
    font-size: 1.2rem;
  }
  /* 金型製造ページ・各金型の特徴ブロックの表示幅を広げる */
  #esk-servics .my-feature-block {
    margin: 0 1rem;
  }
  /******************************
  ** モバイルではカラムを縦並べ
  ******************************/
  /* フロントページ・金型製造セクションのカラム */
  /* 会社案内ページ・会社概要セクションのカラム */
  /* 金型製造ページ・実績紹介セクションのカラム */
  /* 採用情報ページ・職場紹介セクションのカラム */
  #esk-topservice .wp-block-columns,
  #esk-profile .wp-block-columns,
  #esk-case .wp-block-columns,
  #esk-work-environment .wp-block-columns {
    flex-direction: column;
  }
  /**************************************************
  ** アピールエリアアニメーション
  **************************************************/
  /* 左上端に三角形の飾りを追加 */
  .appeal::before {
    animation: moveTriangleTopMobile 1s ease-in-out 0s 1 forwards;
  }
  /* 右下端に三角形の飾りを追加 */
  .appeal::after {
    animation: moveTriangleBottomMobile 1s ease-in-out 0.5s 1 forwards;
  }
  @keyframes moveTriangleTopMobile {
    0% {
      top: -240px;
    }
    100% {
      top: -120px;
    }
  }
  @keyframes moveTriangleBottomMobile {
    0% {
      bottom: -240px;
    }
    100% {
      bottom: -120px;
    }
  }
}