@charset "UTF-8";
/* =========================================================
   名精工業有限会社 サイト共通CSS
   ---------------------------------------------------------
   デザイン基準 : PC 1920px（コンテンツ幅 1110px / ワイド 1520px）
   ブレークポイント（preset の表示切替 class に準拠）
     PC  : 1200px 〜
     MD  : 1024px 〜 1199px
     TB  : 768px 〜 1023px
     SP  : 〜 767px
   ========================================================= */

/* ******************************
   変数
   ****************************** */
:root {
  --main-color: #d00010;
  --main-color-dark: #a8000d;
  --txt-color: #282828;
  --dark-color: #181818;
  --gray-bg: #f6f6f6;
  --border-color: #cccccc;

  --ff-ja: "Noto Sans JP", sans-serif;
  --ff-en: "Oswald", "Noto Sans JP", sans-serif;
  --ff-en2: "Outfit", "Noto Sans JP", sans-serif;
  --ff-mincho: "Shippori Mincho B1", serif;

  --hdr-h: 64px;
  --ease: cubic-bezier(.25, .8, .25, 1);
}

/* ******************************
   コンテナ設定＋画面端までの距離
   ****************************** */
:root {
  /* 画面端までの距離（通常） */
  --margin-for-device-side: -15px;
  /* 画面端までの距離（ワイド） */
  --margin-for-device-side-w: -15px;
}
@media (min-width:768px){
  :root {
    --margin-for-device-side: calc(345px - 50vw);
    --margin-for-device-side-w: calc(345px - 50vw);
  }
}
@media (min-width:992px){
  :root {
    --margin-for-device-side: calc(465px - 50vw);
    --margin-for-device-side-w: calc(465px - 50vw);
  }
}
@media (min-width:1200px){
  :root {
    --margin-for-device-side: calc(555px - 50vw);
    --margin-for-device-side-w: calc(555px - 50vw);
  }
}
@media (min-width:1366px){
  /* コンテナサイズ:1286px */
  .container.wide{
    max-width: calc(1286px + 80px);
    padding-left: 40px;
    padding-right: 40px;
  }
  :root {
    --margin-for-device-side-w: calc(643px - 50vw);
  }
}
@media (min-width:1470px){
  /* コンテナサイズ:1370px */
  .container.wide{
    max-width: calc(1370px + 100px);
    padding-left: 50px;
    padding-right: 50px;
  }
  :root {
    --margin-for-device-side-w: calc(685px - 50vw);
  }
}
@media (min-width:1720px){
  /* コンテナサイズ:1520px */
  .container.wide{
    max-width: calc(1520px + 200px);
    padding-left: 100px;
    padding-right: 100px;
  }
  :root {
    --margin-for-device-side-w: calc(760px - 50vw);
  }
}

/* ******************************
   共通設定
   ****************************** */
p,
h1, h2, h3, h4, h5, h6{
  margin: 0;
  letter-spacing: inherit;
}
h1, h2, h3, h4, h5, h6{
  line-height: 1.5;
}
a{
  color: inherit;
  transition: 0.3s;
}
a:hover{
  text-decoration: none;
  color: var(--main-color);
}
img{
  max-width: 100%;
  width: auto;
}
ul, ol, li{
  margin: 0;
  padding: 0;
  list-style: none;
}
u{
  display: inline-block;
  text-decoration: none;
  font-style: normal;
}

.img_fit{
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.img_fit:before{
  content: "";
  display: block;
  padding-top: 100%;
}
.img_fit img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover';
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
}
a.img_fit{
  display: block;
}
a .img.img_fit img{
  transition: 0.2s all;
}
a:hover .img.img_fit img{
  transform: scale(1.05);
}

/* 動画埋め込みのレスポンシブ対応 */
iframe{
  max-width: 100%;
}
.responsive_video {
  position: relative;
  z-index: 1;
}
.responsive_video:before{
  content: "";
  display: block;
  padding-top:56.25%;
}
.responsive_video video,
.responsive_video iframe,
.responsive_video object,
.responsive_video embed {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.gjs-dashed .responsive_video:before{
  display: none;
}
.gjs-dashed .responsive_video [data-gjs-type="video"]:before{
  content: "";
  display: block;
  padding-top:56.25%;
  pointer-events: none;
}

/* 指定デバイスのみで表示するclass */
@media (min-width:1200px){
  .md:not(.pc){ display: none!important; }
  .tb:not(.pc){ display: none!important; }
  .sp:not(.pc){ display: none!important; }
}
@media (min-width:1024px) and (max-width:1199px){
  .pc:not(.md){ display: none!important; }
  .tb:not(.md){ display: none!important; }
  .sp:not(.md){ display: none!important; }
}
@media (min-width:768px) and (max-width:1023px){
  .pc:not(.tb){ display: none!important; }
  .md:not(.tb){ display: none!important; }
  .sp:not(.tb){ display: none!important; }
}
@media (max-width:767px){
  .pc:not(.sp){ display: none!important; }
  .md:not(.sp){ display: none!important; }
  .tb:not(.sp){ display: none!important; }
}

/* 指定デバイスで改行を消す */
@media (min-width:1720px){
  .fw_nobr br{ display: none !important; }
}
@media (min-width:1520px){
  .lg_nobr br{ display: none !important; }
}
@media (min-width:1200px){
  .pc_nobr br{ display: none !important; }
}
@media (min-width:1024px) and (max-width:1199px){
  .md_nobr br{ display: none !important; }
}
@media (min-width:768px) and (max-width:1023px){
  .tb_nobr br{ display: none !important; }
}
@media (max-width:767px){
  .sp_nobr br{ display: none !important; }
}

/* 指定した行数での切り取り */
.txt_ellipsis_line1,
.txt_ellipsis_line2,
.txt_ellipsis_line3,
.txt_ellipsis_line4,
.txt_ellipsis_line5,
.txt_ellipsis_line6,
.txt_ellipsis_line7,
.txt_ellipsis_line8,
.txt_ellipsis_line9,
.txt_ellipsis_line10{
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.txt_ellipsis_line1{ -webkit-line-clamp: 1; }
.txt_ellipsis_line2{ -webkit-line-clamp: 2; }
.txt_ellipsis_line3{ -webkit-line-clamp: 3; }
.txt_ellipsis_line4{ -webkit-line-clamp: 4; }
.txt_ellipsis_line5{ -webkit-line-clamp: 5; }

/* ******************************
   ベース
   ****************************** */
body{
  font-family: var(--ff-ja);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .075em;
  color: var(--txt-color);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{
  vertical-align: middle;
}
#root {
  overflow: hidden;
}

/* =========================================================
   共通パーツ
   ========================================================= */

/* ---------- セクション見出し ---------- */
.sec_ttl_ja{
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6;
  padding-left: 4px;
}
.sec_ttl_en{
  margin-top: -5px;
  font-family: var(--ff-en);
  font-size: 60px;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1;
}
.sec_ttl_en::first-letter{
  color: var(--main-color);
}
.sec_ttl_white .sec_ttl_ja,
.sec_ttl_white .sec_ttl_en{
  color: #fff;
}
@media (max-width:1199px){
  .sec_ttl_en{ font-size: 50px; }
}
@media (max-width:767px){
  .sec_ttl_ja{ font-size: 13px; padding-left: 2px; }
  .sec_ttl_en{ font-size: 42px; margin-top: 4px; }
}

/* ---------- リード ---------- */
.sec_lead{
  margin-top: 36px;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1.6;
}
@media (max-width:1199px){
  .sec_lead{ font-size: 26px; }
}
@media (max-width:767px){
  .sec_lead{ margin-top: 24px; font-size: 24px; }
}

/* ---------- 本文 ---------- */
.sec_txt{
  margin-top: 10px;
}
.sec_txt p{
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .075em;
  line-height: 2.25;
}
@media (max-width:767px){
  .sec_txt{ margin-top: 16px; }
  .sec_txt p{ font-size: 16px; line-height: 1.875; }
}

/* ---------- 赤ボタン ---------- */
.btn_red{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 287px;
  max-width: 100%;
  height: 65px;
  padding: 0 60px 1px 26px;
  background: var(--main-color);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6;
  overflow: hidden;
}
.btn_red::after{
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  width: 27px;
  height: 1px;
  background: #fff;
  transition: width .4s var(--ease);
}
.btn_red:hover{
  color: #fff;
  background: var(--main-color-dark);
}
.btn_red:hover::after{
  width: 44px;
}
@media (max-width:767px){
  .btn_red{ 
    width: 260px;
    height: 56px;
    font-size: 15px;
    margin-inline:auto;
  }
}

/* ---------- 見出し＋右ボタンの行 ---------- */
.sec_head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
@media (max-width:767px){
  .sec_head{ display: block; }
  .sec_head_btn{ margin-top: 24px; }

}

/* ---------- ナビ（ヘッダー・フッター共通の白帯） ---------- */
.gnav,
.ftr_nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1048px;
  height: 41px;
  padding: 0 32px 0 15px;
  background: #fff;
  border-radius: 4px;
}
.gnav_item{
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--txt-color);
  white-space: nowrap;
}
.gnav_item.current{
  background: var(--main-color);
  color: #fff;
}
.gnav_item.current:hover{
  color: #fff;
}
@media (min-width:1024px){
  .gnav_item{
    width: auto;
    justify-content: flex-start;
  }
}
/* =========================================================
   ヘッダー
   ========================================================= */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--hdr-h);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  transition: background-color .3s, box-shadow .3s;
}
.hdr_logo{
  position: absolute;
  top: 8px;
  left: 16px;
  z-index: 3;
  width: 36px;
  transition: width .3s var(--ease), top .3s var(--ease), left .3s var(--ease);
}
.hdr_logo .img_fit:before{ padding-top: 132.22%; } /* 180 x 238 */

/* ハンバーガー */
.hdr_toggle{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hdr-h);
  height: var(--hdr-h);
  background: var(--main-color);
  color: #fff;
  font-size: 26px;
}
.hdr_toggle:hover{ color: #fff; }
/* SP は画面下の固定メニュー（footer_fix）の MENU で開閉するため非表示 */
.hdr_toggle{ display: none; }
@media (min-width:768px){
  .hdr_toggle{ display: flex; }
}

/* ---------------------------------------------------------
   ハンバーガーメニュー（1199px 以下で開く全画面メニュー）
   SP  : ナビ 2 列（日本語＋英字）→ ロゴ → 線 → SNS → 会社情報（中央揃え）
   TB  : 左にロゴ・SNS・会社情報 / 縦線 / 右にナビ 1 列
   MD〜: 左にロゴ・SNS・会社情報 / 縦線 / 右にナビ 2 列
   --------------------------------------------------------- */
.hdr_menu{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 40px 24px 100px; /* 下は固定フッターメニュー（60px）分 */
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity .35s, visibility .35s;
}
.is_gnav_open .hdr_menu{
  opacity: 1;
  visibility: visible;
}
.is_gnav_open{
  overflow: hidden;
}
.is_gnav_open .header{
  background: transparent;
  box-shadow: none;
}
/* メニュー内にロゴがあるため、ヘッダーのロゴは隠す */
.is_gnav_open .hdr_logo{
  opacity: 0;
  visibility: hidden;
}
/* SP：メニューを開いている間も固定フッターメニュー（MENU で閉じる）を前面に */
.is_gnav_open .footer_fix{
  position: fixed;
  z-index: 1001;
}

/* ---------- ナビ ---------- */
.hdr_menu .gnav{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  width: 100%;
  height: auto;
  padding: 24px 0 0;
  border-top: 1px solid var(--border-color);
  background: transparent;
  border-radius: 0;
}
.hdr_menu .gnav_item{
  /* 英字（左）と日本語（右）を横並び。HTML は 日本語→英字 の順のため row-reverse */
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: flex-end; /* row-reverse のため、SP の日本語は左寄せ */
  width: calc(50% - 8px); /* SP：日本語のみ 2 列 */
  height: auto;
  margin-bottom: 20px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--txt-color);
  border-radius: 0;
  color: var(--txt-color);
  white-space: nowrap;
  transition: color .3s, border-color .3s;
}
.hdr_menu .gnav_ja{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.5;
}
/* SP は英字なし（TB 以上で表示） */
.hdr_menu .gnav_en{
  display: none;
  font-family: var(--ff-en);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1;
}
.hdr_menu .gnav_item:hover,
.hdr_menu .gnav_item.current{
  background: transparent;
  border-color: var(--main-color);
  color: var(--main-color);
}

/* ---------- ロゴ・SNS・会社情報 ---------- */
.hdr_menu_info{
  display: flex;
  flex-direction: column;
  align-items: center;
  order: 2; /* SP はナビの下 */
  margin-top: 18px;
  text-align: center;
}
.hdr_menu_logo{
  width: 64px;
}
.hdr_menu_logo .img_fit:before{ padding-top: 132.22%; } /* 180 x 238 */
.hdr_menu_company{
  width: 100%;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}
.hdr_menu_name{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.6;
}
.hdr_menu_address{
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: .05em;
  line-height: 1.6;
}
/* SNS（アカウントがある場合に .hdr_menu_company の先頭に追加）
   <div class="hdr_menu_sns">
     <a href="URL" class="hdr_menu_sns_item"><i class="fa fa-instagram"></i><p>Instagram</p></a>
   </div> */
.hdr_menu_sns{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 24px;
}
.hdr_menu_sns_item{
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: var(--txt-color);
}
.hdr_menu_sns_item i{
  width: 30px;
  font-size: 22px;
  text-align: center;
}
.hdr_menu_sns_item p{
  margin-left: 18px;
  font-family: var(--ff-en);
  font-size: 16px;
  letter-spacing: .08em;
  line-height: 1;
}

/* ---------- 閉じるボタン：開くボタンと同じ四角（アイコンだけ × に切り替え） ---------- */

/* ---------- TB：左に会社情報・右にナビ 1 列 ---------- */
@media (min-width:768px){
  .hdr_menu{
    flex-direction: row;
    align-items: stretch;
    padding: 56px 110px 56px 40px;
  }
  .hdr_menu_info{
    order: 0;
    flex-shrink: 0;
    align-items: flex-start;
    width: 230px;
    margin: 0;
    padding-right: 30px;
    border-right: 1px solid var(--border-color);
    text-align: left;
  }
  .hdr_menu_logo{
    width: 90px;
  }
  .hdr_menu_company{
    margin-top: auto; /* 会社情報は下に揃える */
  }
  .hdr_menu .gnav{
    flex: 1;
    align-self: flex-start;
    padding-left: 30px;
  }
  .hdr_menu .gnav{
    padding-top: 0;
    border-top: 0;
  }
  .hdr_menu .gnav_item{
    justify-content: space-between;
    width: 100%;
    margin-bottom: 36px;
    padding-bottom: 8px;
  }
  .hdr_menu .gnav_ja{
    margin-left: 12px;
    font-size: 12px;
    line-height: 1;
  }
  .hdr_menu .gnav_en{
    display: block;
    font-size: 22px;
  }
}

/* ---------- MD 以上：右のナビを 2 列 ---------- */
@media (min-width:1024px){
  .hdr_menu{
    padding: 80px 50px 32px 40px;
  }
  .hdr_menu_info{
    width: 300px;
    padding-right: 40px;
  }
  .hdr_menu_logo{
    width: 110px;
  }
  .hdr_menu .gnav{
    padding: 0 0 0 40px;
  }
  .hdr_menu .gnav_item{
    width: calc(50% - 15px); /* 列の間隔 30px */
    margin-bottom: 64px;
  }
  .hdr_menu .gnav_ja{
    font-size: 13px;
  }
  .hdr_menu .gnav_en{
    font-size: 24px;
  }
  .hdr_menu_name{ font-size: 15px; }
  .hdr_menu_address{ font-size: 14px; }
}

@media (min-width:1200px){
  :root{ --hdr-h: 80px; }
  .header{
    height: 0;
    background: transparent;
    box-shadow: none;
  }
  .hdr_toggle{ display: none; }
  .hdr_logo{ top: 30px; left: 30px; width: 100px; }
  .hdr_menu{
    position: absolute;
    z-index: 2;
    top: 44px;
    left: auto;
    right: 29px;
    bottom: auto;
    display: block;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    transition: top .3s var(--ease);
  }
  .hdr_menu .gnav{
    flex-direction: row;
    flex-wrap: nowrap;
    align-self: auto;
    width: 1048px;
    max-width: none;
    height: 41px;
    padding: 0 32px 0 15px;
    background: #fff;
    box-shadow: 3px 4px 8px rgba(0, 0, 0, .25);
  }
  .hdr_menu .gnav_item{
    width: auto;
    height: 32px;
    border: 0;
    border-radius: 3px;
    color: var(--txt-color);
    font-size: 15px;
  }
  .hdr_menu .gnav_item:hover{ color: var(--main-color); }
  .hdr_menu .gnav_item.current{
    background: var(--main-color);
    color: #fff;
  }
  .hdr_menu .gnav_item.current,
  .hdr_menu .gnav_item.current:hover{
    background: var(--main-color);
    color: #fff;
  }
  /* PC：ドロワー専用の要素は非表示（白帯ナビは従来どおり） */
  .hdr_menu_info,
  .hdr_menu .gnav_item.gnav_home,
  .hdr_menu .gnav_en{ display: none; }
  .hdr_menu .gnav_item{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0 16px;
  }
  .hdr_menu .gnav_ja{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 1;
  }

  /* スクロール後：白帯に縮小 */
  .header.is_scrolled{
    height: var(--hdr-h);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  }
  .header.is_scrolled .hdr_logo{ top: 10px; width: 45px; }
  .header.is_scrolled .hdr_menu{ top: 20px; }
  .header.is_scrolled .gnav{ box-shadow: none; border: 1px solid #e5e5e5; }
}
@media (min-width:1200px) and (max-width:1439px){
  .hdr_menu .gnav{ width: auto; padding: 0 8px 0 4px; }
  .hdr_menu .gnav_item{ padding: 0 12px; font-size: 14px; }
}

/* =========================================================
   メインビジュアル
   ========================================================= */
.mv{
  padding: var(--hdr-h) 10px 10px;
}
.mv_inner{
  position: relative;
  z-index: 1;
  height: calc(100svh - 64px - 60px);
  min-height: inherit;
  max-height: inherit;
  overflow: hidden;
  background: #2b2f33;
}
/* 背景写真：img_fit を親ボックス全面に広げて使用（比率は親セクションに追従） */
/*.mv_img.img_fit,*/
.strength_item_img.img_fit,
.processing_bg.img_fit,
.works_bg.img_fit,
.ftr_contact_bg.img_fit{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*.mv_img.img_fit:before,*/
.strength_item_img.img_fit:before,
.processing_bg.img_fit:before,
.works_bg.img_fit:before,
.ftr_contact_bg.img_fit:before{
  content: none;
}
.mv_img img{
  /*  object-position: 45% 50%;
    animation: mvZoom 12s ease-out both;*/
}
.mv_img:before{
  padding-top:calc(100svh - 64px - 60px);
}
@keyframes mvZoom{
  from{ transform: scale(1.08); }
  to{ transform: scale(1); }
}
.mv_copy{
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 16%;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}
.mv_ttl{
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6;
}
.mv_sub{
  margin-top: 6px;
  font-family: var(--ff-en2);
  font-size: 18px;
  letter-spacing: .075em;
  line-height: 1;
}
@media (min-width:768px){
  .mv_inner{ 
    max-height: inherit;
    height: calc(100svh - 28px);
  }
  .mv_copy{ 
    left: 5%; 
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
  }
  .mv_ttl{ font-size: 48px; }
  .mv_sub{ margin-top: 10px; font-size: 28px; }

  .mv_img:before{
    padding-top: calc(100svh - 28px);
  }
}


@media (min-width:1200px){
  .mv{ padding: 14px; }
  .mv_inner{ 
    height: calc(100vh - 28px);
    min-height: inherit;
  }
  .mv_copy{ 
    left: 68px;
    top: 50%;
    transform: translateY(-50%);
  }
  .mv_ttl{ font-size: 70px; line-height: 1.3; }
  .mv_sub{ margin-top: 23px; font-size: 38px; }

  .mv_img:before{
    padding-top: calc(100svh - 28px);
  }
}

/* =========================================================
   ABOUT
   ========================================================= */
.home_about{
  padding: 72px 0 72px;
}
.about_inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.about_photos{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 548px;
  margin: 48px auto 0;
  order: 2;
}
.about_photos::before{
  content: "";
  display: block;
  padding-top: 106.02%; /* 548 x 581 */
}
.about_photo01{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 64.42%;
}
.about_photo01.img_fit:before{
  padding-top: 119.83%; /* 353 x 423 */
}
.about_photo02{
  position: absolute;
  z-index: 2;
  top: 45.27%;
  left: 51.1%;
  width: 48.9%;
  border: 6px solid #fff;
}
.about_photo02.img_fit:before{
  padding-top: 119.53%; /* 256 x 306（白枠の内側） */
}
.about_body{
  order: 1;
}

.resp_box{
  display: flex;
  flex-wrap: wrap;
}
.resp_box .sec_head{
  display: contents;
}
.resp_box .sec_ttl{
  order: 1;
  width: 100%;
}
.resp_box .column_list,
.resp_box .news_list{
  order: 2;
}
.resp_box .sec_head_btn{
  order: 3;
  width: 100%;
}
.resp_box .sec_head_btn a{
  margin: 40px auto 0;
}

.blog_det .meta{
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.blog_det .meta .column_card_cat{
  min-width: 100px;
  margin-right: 16px;
}
.blog_det .meta .column_card_date{
  padding-top: 7px;
}
@media (min-width:1024px){
  .home_about{ padding: 142px 0 0; }
  .about_inner{
    display: flex;
    justify-content: space-between;
  }
  .about_photos{
    align-self: flex-start;
    width: 49.37%;
    margin: 0;
    order: 1
  }
  .about_body{
    width: 42.2%;
    order: 2;
    margin: -4px .6% 0 0;
  }
  .about_txt{ margin-top: 20px; }

  .resp_box{
    display: block;
  }
  .resp_box .sec_head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .resp_box .sec_ttl{
    order: 1;
    width: auto;
  }
  .resp_box .column_list,
  .resp_box .news_list{

  }
  .resp_box .sec_head_btn{
    order: 2;
    width: auto;;
  }
  .resp_box .sec_head_btn a{
    margin: 0;
  }
}

/* =========================================================
   OUR STRENGTH
   ========================================================= */
.home_strength{
  position: relative;
  z-index: 1;
}
.strength_head{
  position: relative;
  z-index: 1;
  padding: 64px 0 48px;
  background: var(--gray-bg);
}
.strength_head .sec_lead{ margin-top: 34px; }
.strength_head_btn{ margin-top: 32px; }
.strength_head_btn.sp,
.strength_head_btn.tb{
  margin: 40px 0 80px;
}
.strength_head_btn.sp a,
.strength_head_btn.tb a{
  margin: 0 auto;
}
@media (min-width:1024px){
  .home_strength{ margin-top: -96px; }
  .strength_head{
    padding: 98px 0 39px;
    background: transparent;
  }
  .strength_head::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: calc(50% - 79px);
    background: var(--gray-bg);
  }
  .strength_head_inner{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .strength_head_txt p{ white-space: nowrap; }
  .strength_head_btn{ margin: 0 0 10px; }
  .strength_head .sec_lead{ margin-top: 38px; }
}
@media (min-width:1024px) and (max-width:1199px){
  .strength_head_txt p{ white-space: normal; }
  .strength_head_body{ width: 60%; }
}

.strength_list{
  display: flex;
  flex-wrap: wrap;
}
.strength_item{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 320px;
  padding: 40px 24px;
  overflow: hidden;
  background: var(--dark-color);
  color: #fff;
  text-align: center;
}
/* 暗いオーバーレイ */
.strength_item::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, .75);
  pointer-events: none; /* 写真の上の装飾。ビルダーで下の画像をダブルクリックできるように */
}
/* 内側の細枠 */
.strength_item::after{
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .45);
  pointer-events: none; /* 写真の上の装飾。ビルダーで下の画像をダブルクリックできるように */
}
.strength_item_img img{
  transition: transform 1.2s var(--ease);
}
.strength_item:hover .strength_item_img img{
  transform: scale(1.06);
}
.strength_item_body{
  position: relative;
  z-index: 3;
}
.strength_item_num{
  font-family: var(--ff-en);
  font-size: 20px;
  letter-spacing: .05em;
  line-height: 1;
}
.strength_item_ttl{
  margin-top: 15px;
  margin-right: -.6em;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1.5;
}
.strength_item_txt{
  margin-top: 32px;
  margin-right: -.5em;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 2.25;
}
@media (min-width:1024px){
  .strength_item{
    width: calc(100% / 3);
    min-height: 0;
    padding: 31px 16px 24px;
  }
  .strength_item::before{ content: ""; }
  .strength_list::before{ content: none; }
  .strength_item{ aspect-ratio: 640 / 483; }
}
@media (min-width:768px) and (max-width:1023px){
  .strength_item{ min-height: 300px; }
}
@media (min-width:1024px) and (max-width:1199px){
  .strength_item_num{ font-size: 16px; }
  .strength_item_ttl{ margin-top: 12px; font-size: 18px; }
  .strength_item_txt{ margin-top: 16px; font-size: 11px; line-height: 1.875; }
}
@media (max-width:767px){
  .strength_item_num{ font-size: 18px; }
  .strength_item_ttl{ margin-top: 14px; font-size: 23px; }
  .strength_item_txt{ margin-top: 20px; font-size: 16px; line-height: 1.875; }
}

/* =========================================================
   PROCESSING
   ========================================================= */
.home_processing{
  position: relative;
  z-index: 1;
  padding: 72px 0 60px;
  background: #0c0a08;
  color: #fff;
  overflow: hidden;
}
.processing_bg img{
  object-position: 70% 50%;
}
.processing_bg::after{
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .2);
  pointer-events: none; /* 写真の上の装飾。ビルダーで下の画像をダブルクリックできるように */
}
.home_processing .container{
  position: relative;
  z-index: 2;
}
.processing_btn{ margin-top: 24px; }
.processing_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 28px;
  margin-top: 39px;
}
.processing_item{
  width: 100%;
  padding: 14px 8px 12px 14px;
  border: 1px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .2);
}
.processing_item_head{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px 16px;
}
.processing_item_en{
  font-family: var(--ff-en);
  font-size: 20px;
  letter-spacing: .05em;
  line-height: 1;
}
.processing_item_ttl{
  font-size: 23px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1;
}
.processing_item_txt{
  margin-top: 22px;
  font-size: 16px;
  letter-spacing: .075em;
  line-height: 1.875;
}
@media (min-width:768px){
  .processing_item{ width: calc((100% - 28px) / 2); }
}
@media (min-width:1200px){
  .home_processing{ padding: 76px 0 69px; }
}
@media (max-width:1199px){
  .processing_item_en{ 
    font-size: 17px;
    width: 100%;
  }
  .processing_item_ttl{ 
    font-size: 20px;
    margin-left: auto;
    margin-top: 7px;
  }
  .processing_item_txt{ font-size: 16px; }
}

/* =========================================================
   WORKS
   ========================================================= */
.home_works{
  position: relative;
  z-index: 1;
  padding: 72px 0;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.works_bg.img_fit{
  opacity: .8;
}
.home_works .container{
  position: relative;
  z-index: 2;
}
.works_btn{ margin-top: 40px; }
.works_photo{
  max-width: 477px;
  margin: 0 auto 48px;
}
.works_photo.img_fit:before{
  padding-top: 122.43%; /* 477 x 584 */
}
.works_inner{
  display: flex;
  flex-direction: column-reverse;
}
@media (min-width:1024px){
  .home_works{ padding: 165px 0 164px; }
  .works_inner{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .works_body{ width: 49%; margin-top: -4px; }
  .works_photo{ width: 42.97%; margin: 0; }
  .works_btn{ margin-top: 69px; }
}

/* =========================================================
   SOUND ELEMENT
   ========================================================= */
.home_sound{
  padding: 72px 0;
}
.sound_photo{
  max-width: 542px;
  margin: 0 auto 48px;
}
.sound_photo.img_fit:before{
  padding-top: 125.28%; /* 542 x 679 */
}
.sound_btn{ margin-top: 40px; }
@media (min-width:1024px){
  .home_sound{ padding: 118px 0 97px; }
  .sound_inner{
    display: flex;
    justify-content: space-between;
  }
  .sound_photo{ align-self: flex-start; width: 48.83%; margin: 0; }
  .sound_body{ width: 42.2%; margin: -4px .6% 0 0; }
  .sound_txt{ margin-top: 32px; }
  .sound_btn{ margin-top: 51px; }
}

/* =========================================================
   COLUMN
   ========================================================= */
.home_column{
  padding: 72px 0;
  background: var(--gray-bg);
}
.column_list{
  margin-top: 29px;
}
.column_list .webgene-blog{
  display: flex;
  flex-wrap: wrap;
  gap: 24px 27px;
}
.column_list .webgene-item{
  width: 100%;
}
.column_card{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px 8px 0;
  background: #fff;
  border: 2px solid #d9d9d9;
  color: var(--txt-color);
}
.column_card:hover{ color: var(--txt-color); }
.column_card_img.img_fit:before{
  padding-top: 73.27%; /* 333 x 244 */
}
.column_card_img img{
  transition: transform .6s var(--ease);
}
.column_card:hover .column_card_img img{
  transform: scale(1.06);
}
.column_card_cat{
  align-self: flex-start;
  min-width: 153px;
  margin-top: 7px;
  padding: 0 6px;
  background: var(--main-color);
  border: 2px solid #bfbfbf;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 28px;
  text-align: center;
}
.column_card_ttl{
  flex-grow: 1;
  margin: 12px 1px 16px 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.875;
}
.column_card:hover .column_card_ttl{ color: var(--main-color); }
.column_card_foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 9px 9px 12px;
  border-top: 1px solid var(--border-color);
}
.column_card_date{
  font-family: var(--ff-en);
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1;
}
.column_card_arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  padding-left: 2px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  font-size: 20px;
  transition: .3s;
}
.column_card:hover .column_card_arrow{
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}
@media (min-width:768px){
  .column_list .webgene-item{ width: calc((100% - 54px) / 3); }
  .column_list .webgene-blog{ gap: 24px 27px; }
}
@media (min-width:768px) and (max-width:1023px){
  .column_list .webgene-blog{ gap: 24px 16px; }
  .column_list .webgene-item{ width: calc((100% - 32px) / 3); }
  .column_card_cat{ min-width: 0; }
}
@media (min-width:1200px){
  .home_column{ padding: 97px 0 100px; }
}

/* =========================================================
   NEWS
   ========================================================= */
.home_news{
  padding: 72px 0 96px;
}
.news_list{
  margin-top: 29px;
  border-top: 1px solid var(--border-color);
}
.news_list .webgene-item{
  border-bottom: 1px solid var(--border-color);
}
.news_item{
  display: flex;
  align-items: center;
  min-height: 114px;
  padding: 20px 20px;
}
.news_item:hover{
  background: var(--gray-bg);
  color: var(--txt-color);
}
.news_item:hover .news_item_ttl{ color: var(--main-color); }
.news_item_date{
  text-align: center;
  flex-shrink: 0;
  width: 139px;
  /* 日付は CMS から「2026.09.28」の 1 タグで出力され、main.js で「2026 09.28」に置き換える。
     文字の入る幅を狭めて、半角スペースの位置で年と月日の 2 行に折り返す */
  padding-right: 96px;  /* 文字の入る幅を43pxにして、半角スペースの位置で折り返す */
  margin-top: -5px; /* 行間（1.5）で上に空く分を相殺 */
  font-family: var(--ff-en);
  font-size: 19px;
  font-weight: 200;
  letter-spacing: 0;
  line-height: 1.5; /* 1 タグで 2 行にするため、行間で年と月日の間隔を作る（規約⑨の例外） */
}
/*.news_item_date p + p{
  margin-top: 10px;
}*/
.news_item_cat{
  display: inline-block;
  padding: 0 6px 0 9px;
  border: 1px solid var(--main-color);
  font-family: var(--ff-mincho);
  font-size: 15px;
  letter-spacing: .075em;
  line-height: 25px;
}
.news_item_ttl{
  margin-top: 6px;
  font-size: 15px;
  letter-spacing: .075em;
  line-height: 2;
  transition: color .3s;
}
@media (min-width:1200px){
  .home_news{ padding: 92px 0 248px; }
}
@media (max-width:767px){
  .news_item{
    display: block;
    min-height: 0;
    padding: 20px 4px;
  }
  .news_item_date{
    text-align: left;
    width: auto;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 1;
    white-space: nowrap; /* スマホは1行で表示 */
  }
  .news_item_date p + p{ margin-top: 0; letter-spacing: 0; }
  .news_item_date p + p::before{ content: "."; }
  .news_item_ttl{ line-height: 1.875; font-size: 16px; }
}

/* =========================================================
   フッター：お問い合わせ
   ========================================================= */
.ftr_contact{
  --contact-top: 34.17vw;
  position: relative;
  z-index: 1;
  padding: var(--contact-top) 0 78px;
  background: var(--dark-color);
}
.ftr_contact_bg.img_fit{
  height: calc(var(--contact-top) + 124px);
}
.ftr_contact .container{
  position: relative;
  z-index: 2;
}
.ftr_contact_box{
  padding: 40px 20px 44px;
  background: #fff;
  text-align: center;
}
.ftr_contact_ttl{
  font-family: var(--ff-en);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.ftr_contact_ttl::first-letter{
  color: var(--main-color);
}
.ftr_contact_sub{
  font-weight: 500;
  margin-top: 22px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 17px;
  letter-spacing: 0;
  line-height: 1.6;
}
.ftr_contact_txt{
  margin-top: 14px;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.875;
}
.ftr_contact_form{
  margin-top: 36px;
}
.ftr_contact_label{
  max-width: 382px;
  margin: 0 auto;
  background: var(--main-color);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 38px;
}
.ftr_contact_link{
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  font-family: var(--ff-en);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--dark-color);
}
.ftr_contact_link::after{
  content: "→";
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 51px;
  height: 51px;
  margin-left: 17px;
  border-radius: 50%;
  background: var(--main-color);
  color: #fff;
  font-family: var(--ff-ja);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  transition: transform .4s var(--ease);
}
.ftr_contact_link:hover::after{
  transform: translateX(6px);
}
@media (min-width:768px){
  .ftr_contact_box{ padding: 33px 40px 50px; }
  .ftr_contact_ttl{ font-size: 80px; }
  .ftr_contact_sub{ margin-top: 19px; font-size: 20px; }
  .ftr_contact_txt{ margin: 10px -.5em 0 0; font-size: 16px; }
  .ftr_contact_form{ margin-top: 41px; }
}
@media (min-width:1920px){
  .ftr_contact{ --contact-top: 656px; }
}

/* =========================================================
   フッター：メイン
   ========================================================= */
.ftr_main{
  background: var(--dark-color);
  border-top: 1px solid rgba(255, 255, 255, .7);
  color: #fff;
}
.ftr_inner{
  padding: 56px 0 48px;
  text-align: center;
}
.ftr_logo{
  width: 110px;
  margin: 0 auto;
}
.ftr_logo .img_fit:before{ padding-top: 132.22%; } /* 180 x 238 */
.ftr_info{
  margin-top: 36px;
}
.ftr_nav{
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 4px;
  gap: 4px 0;
}
.ftr_nav .gnav_item:hover{ color: var(--main-color); }
.ftr_nav .gnav_item.current:hover{ color: #fff; }
.ftr_address{
  margin-top: 32px;
}
.ftr_address p{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1.875;
}
.ftr_bottom{
  background: var(--dark-color);
  border-top: 1px solid rgba(255, 255, 255, .7);
  color: #fff;
}
.ftr_copy{
  padding: 16px 0 18px;
  font-size: 12px;
  letter-spacing: .075em;
  line-height: 1.6;
  text-align: center;
}
@media (min-width:768px){
  .ftr_address p{ font-size: 16px; line-height: 2.25; }
  .ftr_copy{ font-size: 14px; text-align: right; }
}
@media (min-width:1200px){
  .ftr_inner{
    display: flex;
    /* ロゴの左端を通常コンテンツ(1110px)の左端に揃える */
    padding: 97px 0 102px calc(var(--margin-for-device-side-w) - var(--margin-for-device-side));
    text-align: left;
  }
  .ftr_logo{
    flex-shrink: 0;
    width: 180px;
    margin: 0 0 0 -8px;
  }
  .ftr_info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    min-width: 0;
    margin: 33px 0 0 97px;
  }
  .ftr_nav{
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1048px;
    height: 41px;
    padding: 0 32px 0 15px;
    margin-left: auto;
  }
  .ftr_address{ margin: 0 0 -11px; }
  .ftr_copy{ padding: 12px 0 24px; }
}
@media (min-width:1200px) and (max-width:1439px){
  .ftr_info{ margin-left: 48px; }
  .ftr_nav{ padding: 0 8px 0 4px; }
  .ftr_nav .gnav_item{ padding: 0 10px; font-size: 14px; }
}

/* =========================================================
   下層ページ共通：メインビジュアル（pg_header）
   ========================================================= */
.pg_header{
  padding: var(--hdr-h) 10px 0;
}
.pgh_inner{
  position: relative;
  z-index: 1;
  height: 240px;
  overflow: hidden;
  background: #cfd6da;
}
.pgh_img.img_fit{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pgh_img.img_fit:before{
  content: none;
}
/* 写真の上に重ねる暗さ（pg_header に pgh_shade20 / 35 / 40 を付与） */
.pgh_shade20{ --pgh-shade: .2; }
.pgh_shade35{ --pgh-shade: .35; }
.pgh_shade40{ --pgh-shade: .4; }
.pgh_img::after{
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, var(--pgh-shade, 0));
  pointer-events: none; /* 写真の上の装飾。ビルダーで下の画像をダブルクリックできるように */
}
.pgh_ttl_wrap{
  position: absolute;
  left: 24px;
  bottom: 32px;
  z-index: 2;
}
.pgh_ttl{
  font-family: var(--ff-en2);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .075em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
@media (min-width:768px){
  .pgh_inner{ height: 400px; }
  .pgh_ttl_wrap{ left: 5%; bottom: 72px; }
  .pgh_ttl{ font-size: 32px; }
}
@media (min-width:1200px){
  .pg_header{ padding: 14px 14px 0; }
  .pgh_inner{ height: 653px; }
  .pgh_ttl_wrap{ left: 122px; bottom: 118px; }
  .pgh_ttl{ font-size: 38px; }
}

/* =========================================================
   私たちについて：ABOUT MEISEI
   ========================================================= */
.about_meisei,
.snd_original{
  padding: 64px 0 72px;
}
/* SP：文章が上・写真が下（HTML は写真→文章の順なので column-reverse） */
.meisei_inner,
.original_inner{
  display: flex;
  flex-direction: column-reverse;
}
.meisei_photo,
.original_photo{
  width: 100%;
  max-width: 543px;
  margin: 40px auto 0;
}
.meisei_photo.img_fit:before,
.original_photo.img_fit:before{
  padding-top: 125.05%; /* 543 x 679 */
}
.meisei_body,
.original_body{
  margin-top: 0;
}
@media (min-width:768px){
  .meisei_inner,
  
  .original_photo{ margin: 0 auto; }
  .meisei_body,
  .original_body{ margin-top: 40px; }
}
.meisei_body .sec_ttl_en,
.original_body .sec_ttl_en{
  margin-top: 0;
}
@media (min-width:1024px){
  .about_meisei,
  .snd_original{ padding: 157px 0 176px; }
  .meisei_inner,
  .original_inner{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    
  }
  .meisei_photo,
  .original_photo{
    flex-shrink: 0;
    width: 48.92%;
    max-width: none;
    margin: 0;
  }
  .meisei_body,
  .original_body{
    flex-grow: 1;
    min-width: 0;
    /* 本文の右端はワイドコンテナ（1520px）の右端まで広げる */
    margin: 0 calc(var(--margin-for-device-side) - var(--margin-for-device-side-w)) 0 8.47%;
    padding-top: 16px;
  }
  .meisei_txt,
  .original_txt{ margin: 31px 0 0 0; }
}

/* =========================================================
   私たちについて：OUR MIND
   ========================================================= */
.about_mind,
.snd_story{
  position: relative;
  z-index: 1;
  padding: 72px 0;
  background: #1a1a1a;
  color: #fff;
  overflow: hidden;
}
.mind_bg.img_fit,
.story_bg.img_fit{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mind_bg.img_fit:before,
.story_bg.img_fit:before{
  content: none;
}
.mind_bg::after,
.story_bg::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, .5);
  pointer-events: none; /* 写真の上の装飾。ビルダーで下の画像をダブルクリックできるように */
}
.mind_bg img,
.story_bg img{
  object-position: 60% 50%;
}
.about_mind .container,
.snd_story .container{
  position: relative;
  z-index: 2;
}
.mind_txt p,
.story_txt p{
  font-weight: 500;
}
.mind_txt_last,
.story_txt_last{
  margin-top: 36px;
}
.mind_btn{
  margin-top: 40px;
}
@media (min-width:1200px){
  .about_mind,
  .snd_story{ padding: 145px 0 110px; }
  .mind_btn{ margin-top: 62px; }
}
@media (max-width:767px){
  .mind_txt_last,
  .story_txt_last{ margin-top: 28px; }
  .ftr_contact_txt{text-align: justify;}
}

/* =========================================================
   私たちについて：OUR APPROACH
   ========================================================= */
.about_approach,
.snd_features{
  padding: 64px 0 64px;
  background: var(--gray-bg);
  overflow: hidden;
}
.big_ttl{
  position: relative;
  z-index: 1;
  text-align: center;
}
.big_ttl_en{
  font-family: var(--ff-en);
  font-size: 12.5vw;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.big_ttl_ja{
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 49%;
  padding: 0 15px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1.6;
  transform: translateY(-50%);
}
.big_ttl_ja.js_fade{
  transform: translateY(calc(-50% + 30px));
}
.big_ttl_ja.js_fade.is_inview{
  transform: translateY(-50%);
}
.big_ttl_ja em{
  font-style: normal;
  color: var(--main-color);
}

.approach_item,
.feature_item{
  padding: 56px 0;
}
/* 偶数番目は黒背景・写真と本文の左右を入れ替え（⑳ nth-child で自動切替） */
.approach_item:nth-child(even),
.feature_item:nth-child(even){
  background: #000;
  color: #fff;
}
.approach_item_inner,
.feature_item_inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column-reverse;
}
.approach_item_body,
.feature_item_body{
  margin-top: 40px;
}
/* 本文は大きな番号の上に重ねる */
.approach_item_body .sec_ttl,
.approach_item_body .sec_lead,
.approach_item_body .sec_txt,
.feature_item_body .sec_ttl,
.feature_item_body .sec_lead,
.feature_item_body .sec_txt{
  position: relative;
  z-index: 1;
}
.approach_item_photo,
.feature_item_photo{
  max-width: 477px;
  width: 100%;
  margin: 0 auto;
}
.approach_item_photo.img_fit:before,
.feature_item_photo.img_fit:before{
  padding-top: 122.22%; /* 477 x 583 */
}
.approach_item_num,
.feature_item_num{
  position: absolute;
  right: -4px;
  bottom: -6px;
  z-index: 0;
  font-family: var(--ff-en);
  font-size: 120px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: #e9e9e9;
}
.approach_item:nth-child(even) .sec_ttl_ja,
.approach_item:nth-child(even) .sec_ttl_en,
.feature_item:nth-child(even) .sec_ttl_ja,
.feature_item:nth-child(even) .sec_ttl_en{
  color: #fff;
}
.approach_item:nth-child(even) .approach_item_num,
.feature_item:nth-child(even) .feature_item_num{
  color: #313131;
}

@media (min-width:768px){
  .big_ttl_ja{ font-size: 24px; }
}
@media (max-width:767px) {
  .big_ttl_en{
    font-size: 17.5vw;
  }
  .big_ttl_ja{
    font-size: 24px;
  }
}
@media (min-width:1024px){
  .approach_item,
  .feature_item{ padding: 98px 0 100px; }
  .approach_item:first-child,
  .feature_item:first-child{ padding-top: 49px; }
  .approach_item_inner,
  .feature_item_inner{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .approach_item:nth-child(even) .approach_item_inner,
  .feature_item:nth-child(even) .feature_item_inner{
    flex-direction: row-reverse;
  }
  .approach_item_body,
  .feature_item_body{
    width: 48.65%;
    margin-top: -4px;
  }
  /* 句読点で終わる行の折り返しを防ぐため、本文だけ少し右へはみ出せる幅にする */
  .approach_item_body .sec_lead,
  /*.approach_item_txt,*/
  .feature_item_body .sec_lead
  /*.feature_item_txt*/
  { margin-right: -20px; }
  .approach_item_photo,
  .feature_item_photo{
    flex-shrink: 0;
    width: 42.97%;
    max-width: none;
    margin: 0;
  }
  .approach_item_num,
  .feature_item_num{
    font-size: 240px;
    right: auto;
    left: 0;
    bottom: -10px;
    width: calc(48.65% + 23px);
    text-align: right;
  }
  .approach_item:nth-child(even) .approach_item_num,
  .feature_item:nth-child(even) .feature_item_num{
    left: auto;
    right: -9px;
    width: auto;
  }
}
@media (min-width:1024px) and (max-width:1199px){
  .approach_item_num,
  .feature_item_num{ font-size: 180px; }
}
@media (min-width:1200px){
  .about_approach,
  .snd_features{ padding: 128px 0 98px; }
  .big_ttl_en{ font-size: 240px; }
  .big_ttl_ja{ top: 118px; font-size: 30px; transform: none; }
  /* 先頭の「」」の余白分、見た目の中心を揃える */
  .approach_head .big_ttl_ja{ right: 16px; }
  /* 末尾の「。」の余白分、見た目の中心を揃える */
  .equip_head .big_ttl_ja{ left: 22px; }
  .big_ttl_ja.js_fade{ transform: translateY(30px); }
  .big_ttl_ja.js_fade.is_inview{ transform: none; }
}

/* =========================================================
   共通：背景の大きな英字見出し（big_ttl）
   ※ スタイル本体は「私たちについて」の項に定義。ここでは色の差分のみ
   ========================================================= */
.mat_head .big_ttl_en{ color: #f6f6f6; }
.equip_head .big_ttl_en{ color: #393939; }
.equip_head .big_ttl_ja{ color: #fff; }

/* 見出し英字の字間 0 指定（デザインで字間 0 の箇所） */
.sec_ttl_en.sec_ttl_en_ls0{ letter-spacing: 0; }

/* =========================================================
   加工について：METAL PROCESSING
   ========================================================= */
.proc_metal{
  padding: 64px 0 72px;
}
.metal_body .sec_ttl_en{
  margin-top: 0;
}
.metal_txt_last{
  margin-top: 36px;
}
.metal_photo{
  max-width: 542px;
  margin: 40px auto 0;
}
.metal_photo.img_fit:before{
  padding-top: 125.09%; /* 542 x 678 */
}
@media (min-width:1024px){
  .proc_metal{ padding: 157px 0 178px; }
  .metal_inner{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .metal_body{
    flex: 1;
    min-width: 0;
    padding: 16px 40px 0 0;
  }
  .metal_body .sec_txt:not(.metal_txt_last){ margin-top: 31px; }
  .metal_photo{
    flex-shrink: 0;
    /* 写真は通常コンテンツ（1110px）の右半分に揃える */
    width: calc((100% + 2 * (var(--margin-for-device-side) - var(--margin-for-device-side-w))) * .4883);
    max-width: none;
    margin: 0 calc(var(--margin-for-device-side-w) - var(--margin-for-device-side)) 0 0;
  }
}
@media (max-width:767px){
  .metal_txt_last{ margin-top: 28px; }
}

/* =========================================================
   加工について：CAPABILITIES
   ========================================================= */
.proc_cap{
  padding-bottom: 72px;
  background: var(--gray-bg);
}
.cap_intro{
  position: relative;
  z-index: 1;
  padding: 72px 0 48px;
  color: #fff;
}
.cap_bg.img_fit{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: -160px;
}
.cap_bg.img_fit:before{
  content: none;
}
.cap_bg::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, .7);
  pointer-events: none; /* 写真の上の装飾。ビルダーで下の画像をダブルクリックできるように */
}
.cap_intro .container{
  position: relative;
  z-index: 2;
}
.cap_intro_txt p{
  font-weight: 500;
}
.cap_list{
  position: relative;
  z-index: 2;
}
.cap_card{
  position: relative;
  z-index: 1;
  padding: 48px 0;
  background: #000;
  border: 1px solid #7b7b7b;
  color: #fff;
}
.cap_card + .cap_card{
  margin-top: 32px;
}
.cap_card::before{
  content: "";
  position: absolute;
  z-index: 0;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid #747474;
}
.cap_card .container{
  position: relative;
  z-index: 1;
}
@media (max-width:1199px){
  /* カード内の余白（内側の細枠に文字が触れないように） */
  .cap_card .container{ padding-left: 24px; padding-right: 24px; }
  .cap_card_body .sec_lead,
  .cap_card_txt{ margin-right: 0 !important; }
}
.cap_card_photo{
  max-width: 477px;
  margin: 0 auto;
}
.cap_card_photo.img_fit:before{
  padding-top: 86.79%; /* 477 x 414 */
}
.cap_card_body{
  margin-top: 32px;
}
.cap_card_body .sec_ttl_en{
  letter-spacing: 0;
  /*margin-right: -0.5em;*/
}
.cap_suit{
  margin-top: 40px;
}
.cap_suit_head{
  position: relative;
  z-index: 1;
  text-align: center;
}
.cap_suit_en{
  font-family: var(--ff-en);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: #2f2f2f;
  white-space: nowrap;
}
.cap_suit_ttl{
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 50%;
  padding-left: .075em;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1.6;
  color: #fff;
  transform: translateY(-50%);
}
.cap_suit_list{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  /*margin-top: 16px;*/
  margin-top: -10px;
}
.cap_suit_item{
  width: 100%;
  border: 1px solid #f6f6f6;
}
.cap_suit_item_ttl{
  padding: 3px 10px 6px;
  background: var(--main-color);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1.6;
  text-align: center;
}
.cap_suit_item_txt{
  padding: 7px 4px 11px 26px;
  font-size: 16px;
  letter-spacing: .075em;
  line-height: 2.25;
}
@media (min-width:768px){
  .cap_suit_item{ width: calc((100% - 16px) / 2); }
  .cap_suit_en{ font-size: 80px; }
  .cap_suit_ttl{ font-size: 24px; }
}
@media (min-width:1024px){
  .cap_card_main{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .cap_card_photo{
    flex-shrink: 0;
    width: 42.97%;
    margin: 0;
  }
  .cap_card_body{
    width: 48.65%;
    margin-top: -4px;
  }
  .cap_card_body .sec_lead,
  .cap_card_txt{ margin-right: -20px; }
}
@media (min-width:1200px){
  .proc_cap{ padding-bottom: 150px; }
  .cap_intro{ padding: 145px 0 111px; }
  .cap_bg.img_fit{ bottom: -466px; }
  .cap_card{ padding: 95px 0; }
  .cap_card + .cap_card{ margin-top: 47px; }
  .cap_card::before{ top: 14px; left: 14px; right: 14px; bottom: 14px; }
  /* 「SUITABLE FOR」の位置をカード上端から一定にするため高さを固定 */
  /*.cap_card_main{ height: 414px; }*/
  .cap_suit{ margin-top: 37px; }
  .cap_suit_en{ font-size: 100px; }
  .cap_suit_ttl{ top: 21px; font-size: 28px; transform: none; }
  .cap_suit_list{ gap: 28px; margin-top: -14px; }
  .cap_suit_item{ width: calc((100% - 84px) / 4); }
}
@media (max-width:767px){
  .cap_suit_item_ttl{ font-size: 18px; }
  .cap_suit_item_txt{ padding: 10px 16px 12px; font-size: 15px; line-height: 1.875; }
  .ftr_nav{
    display: none;
  }
}

/* =========================================================
   加工について：MATERIALS
   ========================================================= */
.proc_mat{
  padding: 64px 0 72px;
  background: #fff;
  overflow: hidden;
}
.mat_list{
  display: flex;
  flex-wrap: wrap;
  gap: 48px 28px;
  margin-top: 32px;
}
.mat_item{
  width: 100%;
}
.mat_item_ja{
  padding-left: 6px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6;
}
.mat_item_en{
  margin-top: 5px;
  padding-left: 2px;
  font-family: var(--ff-en);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: .05em;
  line-height: 1;
}
.mat_item .mat_item_txt{
  margin-top: 20px;
}
.mat_item_photo{
  margin-top: 28px;
}
.mat_item_photo.img_fit:before{
  padding-top: 59.70%; /* 541 x 323 */
}
@media (min-width:768px){
  .mat_item{ width: calc((100% - 28px) / 2); }
}
@media (min-width:1200px){
  .proc_mat{ padding: 118px 0 147px; }
  .mat_list{ gap: 53px 28px; margin-top: 46px; }
  .mat_item_en{ font-size: 50px; }
  .mat_item .mat_item_txt{ margin-top: 26px; }
  .mat_item_photo{ margin-top: 42px; }
}

/* =========================================================
   加工について：EQUIPMENT
   ========================================================= */
.proc_equip{
  padding: 64px 0 72px;
  margin-bottom: 96px;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.equip_list{
  display: flex;
  flex-wrap: wrap;
  gap: 48px 31px;
  margin-top: 32px;
}
.equip_item{
  width: 100%;
}
.equip_item_maker{
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6;
}
.equip_item_name{
  margin-top: 1px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.346;
}
.equip_item_spec{
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5625;
}
.equip_item_photo{
  margin-top: 20px;
}
.equip_item_photo.img_fit:before{
  padding-top: 101.66%; /* 543 x 552 */
}
.equip_other{
  margin-top: 48px;
  padding: 10px 4px;
  border: 1px solid #fff;
}
.equip_other_txt{
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.346;
}
@media (min-width:768px){
  .equip_item{ width: calc((100% - 31px) / 2); }
  .equip_item_name{ font-size: 26px; }
  .equip_item_spec{ font-size: 16px; }
  .equip_other_txt{ font-size: 26px; }
}
@media (min-width:1200px){
  .proc_equip{ padding: 132px 0 151px; margin-bottom: 198px; }
  .equip_list{ gap: 78px 31px; margin-top: 80px; margin-right: -7px; }
  .equip_other{ margin-top: 78px; padding: 10.5px 4px; }
}

/* =========================================================
   共通：空行をはさんだ本文ブロック（2 つ目以降の sec_txt）
   ========================================================= */
.sec_txt.sec_txt_next{
  margin-top: 36px;
}
@media (max-width:767px){
  .sec_txt.sec_txt_next{ margin-top: 28px; }
}

/* =========================================================
   Sound element
   ※ ORIGINAL PRODUCT / THE STORY / PRODUCT FEATURES のレイアウトは
     「私たちについて」の ABOUT MEISEI / OUR MIND / OUR APPROACH と共通（同じ定義に併記）
   ========================================================= */
.original_photo.img_fit:before{
  padding-top: 125.09%; /* 542 x 678 */
}
.story_bg::after{
  background: rgba(0, 0, 0, .6);
}
.story_bg img{
  object-position: 50% 50%;
}
.features_head .big_ttl_en{ color: #fff; }
.lineup_head .big_ttl_en{ color: #f6f6f6; }

/* LINE UP */
.snd_lineup{
  padding: 64px 0 96px;
  background: #fff;
  overflow: hidden;
}
.lineup_list{
  display: flex;
  flex-wrap: wrap;
  gap: 48px 27px;
  margin-top: 32px;
}
.lineup_item{
  width: 100%;
}
.lineup_item_model{
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6;
}
.lineup_item_name{
  margin-top: 1px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.346;
}
.lineup_item_spec{
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5625;
}
.lineup_item_cont{
  margin-top: 16px;
  font-size: 15px;
  letter-spacing: .075em;
  line-height: 1.875;
}
.lineup_item_photo{
  margin-top: 24px;
}
.lineup_item_photo.img_fit:before{
  padding-top: 92.80%; /* 542 x 503 */
}
@media (min-width:768px){
  .lineup_item{ width: calc((100% - 27px) / 2); }
  .lineup_item_name{ font-size: 26px; }
  .lineup_item_spec,
  .lineup_item_cont{ font-size: 16px; }
  .lineup_item_cont{ line-height: 2.25; }
}
@media (min-width:1200px){
  .snd_story{ padding-bottom: 169px; }
  .snd_features{ padding-bottom: 43px; }
  /* 末尾の「。」の余白分、見た目の中心を揃える */
  .features_head .big_ttl_ja,
  .lineup_head .big_ttl_ja{ left: 20px; }
  .snd_lineup{ padding: 98px 0 198px; }
  .lineup_list{ margin-top: 48px; }
  .lineup_item_spec{ margin-top: 8px; }
  .lineup_item_cont{ margin-top: 14px; }
  .lineup_item_photo{ margin-top: 39px; }
}

/* =========================================================
   コラム・お知らせ（一覧 / 詳細 共通）
   ========================================================= */
.blog_sec{
  padding: 64px 0 96px;
}
.pg_blog_detail .blog_sec{
  padding-top: calc(var(--hdr-h) + 40px);
}
.blog_wrap{
  margin-top: 28px;
}
.blog_side{
  margin-top: 56px;
}
@media (min-width:1024px){
  .blog_wrap{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .blog_main{
    width: 74.5%;   /* 827 / 1110 */
  }
  .blog_side{
    width: 23.15%;  /* 257 / 1110 */
    margin-top: 0;
  }
  .pg_blog_detail .blog_side{
    margin-top: 6px;
  }
}
@media (min-width:1200px){
  .blog_sec{ padding: 145px 0 199px; }
  .pg_blog_detail .blog_sec{ padding-top: 204px; }
  .blog_wrap{ margin-top: 29px; }
}

/* ---------- サイドバー（カテゴリ・日付の絞り込み） ---------- */
.blog_side_box + .blog_side_box{
  margin-top: 48px;
}
/* カテゴリは4件分の高さを確保（件数が少なくても「日付」の位置を揃える） */
.blog_side_box:first-child .blog_side_list{
  min-height: 120px;
}
.blog_side_ttl{
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 51px;
  text-align: center;
}
.blog_side_list{
  margin-top: 17px;
}
.blog_side_list .webgene-item a{
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.875;
}
.blog_side_list .webgene-item a::before{
  content: "■";
  margin-right: 1em;
}
@media (min-width:1200px){
  .blog_side_box + .blog_side_box{ margin-top: 47px; }
}

/* ---------- ページャー（webgene-pagination） ---------- */
.webgene-pagination{
  width: 100%;
  margin-top: 46px;
}
.webgene-pagination ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.webgene-pagination li a{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--main-color);
  background: #fff;
  color: var(--txt-color);
  font-size: 16px;
  letter-spacing: .065em;
  line-height: 1;
}
.webgene-pagination li.selected a,
.webgene-pagination li a:hover{
  background: var(--main-color);
  color: #fff;
}
.webgene-pagination li.next a,
.webgene-pagination li.prev a{
  min-width: 85px;
  padding: 0 12px;
}
/* 「次へ」の » は Font Awesome 4.7（angle-double-right）を疑似要素で表示 */
.webgene-pagination li.next a::after{
  content: "\f101";
  margin-left: 6px;
  font-family: FontAwesome;
  font-size: 18px;
}
.webgene-pagination li.prev a::before{
  content: "\f100";
  margin-right: 6px;
  font-family: FontAwesome;
  font-size: 18px;
}

/* ---------- コラム一覧（カードは TOP のコラムと共通） ---------- */
.column_list.column_list_page{
  margin-top: 0;
}
.column_list_page .column_card_img.img_fit:before{
  padding-top: 76.57%; /* 239 x 183 */
}
.column_list_page .column_card_cat{
  line-height: 34px;
}
.column_list_page .column_card_ttl{
  margin-bottom: 15px;
}
.column_list_page .column_card_foot{
  padding-bottom: 19px;
}
@media (min-width:768px){
  .column_list_page .webgene-blog{ gap: 22px 28px; }
  .column_list_page .webgene-item{ width: calc((100% - 56px) / 3); }
  .column_list_page .webgene-pagination{ width: 100%; margin-top: 24px; }
}
@media (min-width:768px) and (max-width:1199px){
  .column_list_page .webgene-blog{ gap: 20px 16px; }
  .column_list_page .webgene-item{ width: calc((100% - 32px) / 3); }
  .column_list_page .column_card_cat{ min-width: 0; }
}

@media (max-width:767px){
  .column_list_page .webgene-blog{ gap: 16px 0; }
  .column_list_page .webgene-item{ width: 100%; }
  .column_list_page .column_card_cat{ min-width: 0; font-size: 14px; }
  .column_list_page .column_card_ttl{ font-size: 16px; }
  .column_list_page .column_card_foot{ padding: 8px 4px 12px 6px; }
  .column_list_page .column_card_arrow{ width: 32px; height: 32px; font-size: 16px; }
}
@media (max-width:1023px){
  .blog_side_box:first-child .blog_side_list{ min-height: 0; }
}

/* ---------- お知らせ一覧（行は TOP のお知らせと共通） ---------- */
.news_list.news_list_page{
  margin-top: 0;
}
.news_list_page .webgene-pagination{
  margin-top: 46px;
  border: 0;
}
.news_list .webgene-pagination{
  border-bottom: 0;
}

/* ---------- 詳細 ---------- */
.blog_det_ttl{
  padding-bottom: 13px;
  border-bottom: 1px solid #3b5b74;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
}
.blog_det_body{
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 2.125;
  margin-top: 34px;
}
.blog_det_body h2{
  padding: 5px 21px;
  background: #000;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1.944;
  margin-bottom: 30px;
}
.blog_det_body h3{
  margin-top: 32px;
  padding-left: 12px;
  border-left: 4px solid var(--main-color);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1.6;
}
.blog_det_body p{
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 2.125;
}

.blog_det_body > * + p{
  margin-top: 19px;
}
.blog_det_body > p + p{
  margin-top: 0;
}
.blog_det_body a{
  color: var(--main-color);
  text-decoration: underline;
}
.blog_det_img{
  width: 69.17%; /* 572 / 827 */
  margin-top: 33px;
}
.blog_det_body > .blog_det_img:first-child{
  margin-top: 0;
}
.blog_det_img.img_fit:before{
  padding-top: 70.28%; /* 572 x 402 */
}
.blog_det_back{
  margin-top: 50px;
}
.blog_det_back .btn_red{
  margin: 0 auto;
}
/* お知らせ詳細 */
.blog_det_news .blog_det_body{
  margin-top: 38px;
  padding-bottom: 12px;
  border-bottom: 1px solid #3b5b74;
}
.blog_det_news .blog_det_img{
  width: 72.79%; /* 602 / 827 */
}
.blog_det_body img{
  margin-bottom: 20px;
}
.blog_det_news .blog_det_img.img_fit:before{
  padding-top: 66.94%; /* 602 x 403 */
}
.blog_det_news .blog_det_body > * + p{
  margin-top: 43px;
}
.blog_det_news .blog_det_body p{
  letter-spacing: .015em;
  line-height: 1.875;
}
.blog_det_news + .blog_det_back{
  margin-top: 50px;
}
.blog_det .webgene-item .txt h2:not(:first-of-type){
  margin-top: 50px;
  margin-bottom: 0;
}
@media (max-width:767px){
  .blog_det_img,
  .blog_det_news .blog_det_img{ width: 100%; }
  .blog_det_body p{ font-size: 15px; line-height: 1.875; }
}

/* =========================================================
   会社概要
   ========================================================= */
.company_info{
  padding: 64px 0 96px;
}
/* 表（div + display: table） */
.table_rows{
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.table_rows_tr{
  display: table-row;
}
.table_rows_th,
.table_rows_td{
  display: table-cell;
  padding: 20px 20px;
  border-top: 1px solid #a5a7a6;
  border-bottom: 1px solid #a5a7a6;
  vertical-align: top;
}
.table_rows_th{
  width: 25.8%; /* 287 / 1112 */
  border-left: 1px solid #a5a7a6;
  background: #eaeaea;
}
.table_rows_td{
  border-right: 1px solid #a5a7a6;
  background: #fff;
}
.table_rows_th p,
.table_rows_td p{
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1.875;
}
.company_map{
  margin-top: 48px;
}
.company_map.responsive_video:before{
  padding-top: 75%;
}
.company_map iframe{
  border: 0;
}
.company_map .access_map iframe{
  width: 100%;
  height: 250px;
}

/* ギャラリー */
.company_gallery_items{
  display: flex;
  flex-wrap: wrap;
  margin-left: -5px;
  margin-right: -5px;
}
* + .company_gallery_items{
  margin-top: 30px;
}
.company_gallery_item{
  width: 50%;
  padding: 0 5px;
}
.company_gallery_item:nth-child(n+3){
  margin-top: 10px;
}
.company_gallery_item_img{

}
.company_gallery_item_img.img_fit:before{
  padding-top: 71.42%;
}
@media (min-width:768px){
  .table_rows_th{ padding: 20px 20px 20px 21px; }
  .table_rows_td{ padding: 20px 20px 20px 38px; }
  .company_map.responsive_video:before{ padding-top: 34.35%; } /* 1112 x 382 */

  .company_map .access_map iframe{
    width: 100%;
    height: 380px;
  }

  /* ギャラリー */
  .company_gallery_items{
    margin-left: -10px;
    margin-right: -10px;
  }
  * + .company_gallery_items{
    margin-top: 40px;
  }
  .company_gallery_item{
    width: 33.333%;
    padding: 0 10px;
  }
  .company_gallery_item:nth-child(n+3){
    margin-top: 0;
  }
  .company_gallery_item:nth-child(n+4){
    margin-top: 20px;
  }
}
@media (min-width:1200px){
  .company_info{ padding: 147px 0 199px; }
  .company_map{ margin-top: 77px; }

  /* ギャラリー */
  .company_gallery_items{
    margin-left: -15px;
    margin-right: -15px;
  }
  * + .company_gallery_items{
    margin-top: 60px;
  }
  .company_gallery_item{
    width: 33.333%;
    padding: 0 15px;
  }
  .company_gallery_item:nth-child(n+3){
    margin-top: 0;
  }
  .company_gallery_item:nth-child(n+4){
    margin-top: 30px;
  }
}
@media (max-width:767px){
  .table_rows,
  .table_rows_tr,
  .table_rows_th,
  .table_rows_td{ display: block; width: 100%; }
  .table_rows{ border-top: 1px solid #a5a7a6; }
  .table_rows_th,
  .table_rows_td{ padding: 10px 14px; border: 1px solid #a5a7a6; border-top: 0; }
  .table_rows_th p,
  .table_rows_td p{ font-size: 15px; }
}

/* =========================================================
   お問い合わせ（フォームは独自規格の HTML 構造に合わせて装飾のみ）
   ========================================================= */
.contact_form{
  padding: 56px 0 96px;
}
.formTbl .formRow{
  margin: 0;
  border: 1px solid #a5a7a6;
  border-top: 0;
}
.formTbl .formRow:first-child{
  border-top: 1px solid #a5a7a6;
}
.formTbl .formTh{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 13px 14px 22px;
  background: #eaeaea;
}
.formTbl .formTd{
  padding: 8px 15px;
  background: #fff;
}
.formTbl .labelText01{
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.8125;
}
.formTbl .requiredText{
  flex-shrink: 0;
  width: 55px;
  margin-top: 2px;
  background: #b80000;
  border: 1px solid #b80000;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 26px;
  text-align: center;
}
.formTbl .requiredText.nini{
  background: #fff;
  color: #b80000;
}
.formTbl .input,
.formTbl .select,
.formTbl .textarea{
  max-width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1px solid #c8c8c8;
  border-radius: 0;
  background: #fff;
  font-family: var(--ff-ja);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--txt-color);
}
.formTbl .formInput{
  width: 464px;
}
.formTbl .textarea{
  display: block;
  margin-bottom: 6px;
  width: 100%;
  height: 283px;
  padding: 10px 15px;
  line-height: 1.8;
}
.formTbl ::placeholder{
  color: #aaa;
}
/* ラジオボタン（デザインの □ に合わせて四角で表示） */
.formTbl .radioArea{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 19px;
  padding: 8px 0 7px;
}
.formTbl .radio{
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin: 0 6px 0 1px;
  border: 1px solid #555;
  background: #fff;
  vertical-align: -1px;
  cursor: pointer;
}
.formTbl .radio:checked{
  background: var(--main-color);
  box-shadow: inset 0 0 0 2px #fff;
}
.formTbl .labelText02{
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.8;
  cursor: pointer;
}
/* 住所 */
.formTbl .addArea{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.formTbl .addArea + .addArea{
  margin-top: 7px;
}
.formTbl .addArea .labelText02{
  width: 76px;
  letter-spacing: .12em;
  cursor: default;
}
.formTbl .zipcode_i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 42px;
  margin: 0;
  border: 1px solid #c8c8c8;
  border-right: 0;
  background: #d5d5d5;
  font-size: 15px;
}
.formTbl .zipInput{
  width: 160px;
}
.formTbl .zipBtn{
  height: 42px;
  margin-left: 9px;
  padding: 0 17px;
  border: 1px solid #c8c8c8;
  background: #f0f0f0;
  font-family: var(--ff-ja);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--txt-color);
  cursor: pointer;
}
.formTbl .zipBtn:hover{
  background: #e2e2e2;
}
.formTbl .select{
  width: 228px;
  padding-right: 32px;
  -webkit-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='9'%3E%3Cpath d='M0 0h10L5 9z' fill='%23282828'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 9px;
  cursor: pointer;
}
.formTbl .addArea .formInput{
  width: 428px;
}
/* 同意チェック */
.form_agree{
  margin-top: 60px;
  text-align: center;
}
.form_agree .checkbox{
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin: 0 8px 0 0;
  border: 1px solid #282828;
  background: #fff;
  vertical-align: -1px;
  cursor: pointer;
}
.form_agree .checkbox:checked{
  background: var(--main-color);
  box-shadow: inset 0 0 0 2px #fff;
}
.form_agree .label{
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.7;
  cursor: pointer;
}
.form_agree .label a{
  color: var(--main-color);
}
/* プライバシーポリシー（スクロールボックス） */
.privacy_box{
  height: 401px;
  margin-top: 48px;
  border: 1px solid #a5a7a6;
  overflow-y: auto;
  scrollbar-gutter: stable; /* スクロールバーの有無で中央がずれないように */
  scrollbar-color: #181818 #ebebeb;
}
.privacy_box::-webkit-scrollbar{ width: 18px; }
.privacy_box::-webkit-scrollbar-track{ background: #ebebeb; }
.privacy_box::-webkit-scrollbar-thumb{ background: #181818; }
.privacy_inner{
  padding: 24px 52px 30px 27px;
}
.privacy_ttl{
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.857;
  text-align: center;
  margin-right: -40px; /* 見出しはボックス全体の中央に揃える */
}
.privacy_txt{
  margin-top: 43px;
}
.privacy_txt p{
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.875;
}
.privacy_txt p + p{
  margin-top: 1em;
}
.privacy_sttl{
  margin-top: 29px;
  padding: 7px 0 7px 13px;
  border-left: 8px solid var(--main-color);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.667;
}
.privacy_sttl + .privacy_txt{
  margin-top: 13px;
}
.form_submit{
  margin-top: 47px;
}
.form_submit .btn_red{
  margin: 0 auto;
  border: 0;
  font-family: var(--ff-ja);
  text-align: left;
  cursor: pointer;
}
.anchor {
  position: relative;
  top: -30px;
}

.privacy_item {
  margin-top: 30px;
}
/*.privacy_ttl {
  font-size: 18px;
  font-weight: 500;
  padding: 8px 15px;
  margin-bottom: 12px;
  border-left: 6px solid #004382;
  letter-spacing: 0.04em;
}*/
.privacy_txt{
  letter-spacing: 0.04em;
  line-height: 1.875;
  text-align: justify;
}
.privacy_txt p{
  letter-spacing: 0.04em;
}

.privacy_txt_type1{
  text-indent: -1.5em;
  padding-left: 1.5em;
}
.privacy_txt_type1_b{
  text-indent: -1em;
  padding-left: 1em;
}
.privacy_txt_type1_c{
  text-indent: -3em;
  padding-left: 3em;
}
.privacy_txt_type2{

}
.privacy_txt_type2 p{
  text-indent: -1em;
  padding-left: 1em;
}

.privacy_txt ol li{
  font-weight: 500;
  padding-left: 1.6em;
  text-indent: -1.6em;
}
.privacy_txt ul li{
  font-weight: 500;
  padding-left: 1em;
  text-indent: -1em;
}

.thanks_text{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}
@media (min-width:768px){
  .formTbl .formTh{ flex: 0 0 28.15%; max-width: 28.15%; } /* 313 / 1112 */
  .formTbl .formTd{ flex: 0 0 71.85%; max-width: 71.85%; }
  .posts_category_sp{display: none;}
  .anchor{ top: -200px; }
}
@media (min-width:768px) and (max-width:1199px){
  .formTbl .formTh{ flex: 0 0 36%; max-width: 36%; padding-left: 16px; }
  .formTbl .formTd{ flex: 0 0 64%; max-width: 64%; }
  .formTbl .labelText01{ font-size: 15px; letter-spacing: .04em; }
}
@media (min-width:768px) and (max-width:1023px){
  .formTbl .addArea .formInput{ width: calc(100% - 76px); }
  .formTbl .zipBtn{ margin: 8px 0 0 76px; }
  .formTbl .zipInput{
    width: 148px;
  }
}
@media (min-width:1024px){
  .thanks_text{
    text-align: center;
  }
}
@media (min-width:1200px){
  .contact_form{ padding: 148px 0 199px; }
}
@media (max-width:767px){
  .formTbl .formTh{ padding: 10px 14px; }
  .formTbl .formTd{ padding: 12px 14px 14px; }
  .formTbl .formInput,
  .formTbl .addArea .formInput{ width: 100%; }
  .formTbl .zipInput{ width: calc(100% - 185px); }
  .formTbl .zipBtn{ margin: 8px 0 0; width: 100%; }
  .formTbl .addArea .labelText02{ width: 100%; margin-bottom: 4px; }
  .formTbl .select{ width: 100%; }
  .form_agree{ margin-top: 40px; }
  .form_agree .label{ font-size: 15px; }
  .privacy_box{ margin-top: 32px; }
  .privacy_inner{ padding: 24px 16px; }
  .privacy_ttl{ margin-right: 0; }
  .privacy_ttl{ font-size: 19px; letter-spacing: .1em; }
  .privacy_txt{ margin-top: 28px; }
  .privacy_txt p{         font-size: 16px; }
  .privacy_sttl{         font-size: 18px; }
  .thanks_text{
    /*display: block;*/
    letter-spacing: -0.08em;
    margin-top: 30px;
  }
}

/* =========================================================
   ページトップ
   ========================================================= */
.pagetop{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.pagetop.is_show{
  opacity: 1;
  visibility: visible;
}
.pagetop a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--main-color);
  color: #fff;
  font-size: 24px;
}
.pagetop a:hover{
  background: var(--main-color-dark);
  color: #fff;
}

/* =========================================================
   SP 画面下固定メニュー
   ========================================================= */
.footer_fix{
  display: none;
}
@media (max-width:767px){
  body{ padding-bottom: 60px; }
  .footer_fix{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    height: 60px;
  }
  .footer_fix a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    color: #fff;
  }
  .footer_fix a:hover{ color: #fff; }
  .footer_fix .footer_fix_item_1{ background: var(--main-color); }
  .footer_fix .footer_fix_item_2{ background: var(--dark-color); }
  .footer_fix i{ font-size: 18px; }
  .footer_fix p{
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1;
  }
  .pagetop{ right: 12px; bottom: 72px; }
  .pagetop a{ width: 44px; height: 44px; }

  .posts_category_sp{
    margin-bottom: 30px;
  }

}
.select_wrap {
  position: relative;
  z-index: 1;
  margin-top: 20px;
}
.select_wrap select {
  width: 100%;
  padding: 10px 10px;
  /* height: 40px; */
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.select_wrap:after {
  content: "\f078";
  content: "\f107";
  font-family: "FontAwesome";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
/* =========================================================
   スクロールフェードイン
   js_fade / js_delay1〜4 / is_inview は animation.js で動的に付与
   ========================================================= */
.js_fade{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js_fade.is_inview{
  opacity: 1;
  transform: none;
}
.js_fade.js_from_left{ transform: translateX(-40px); }
.js_fade.js_from_right{ transform: translateX(40px); }
.js_fade.js_from_left.is_inview,
.js_fade.js_from_right.is_inview{ transform: none; }
.js_fade.js_delay1{ transition-delay: .15s; }
.js_fade.js_delay2{ transition-delay: .3s; }
.js_fade.js_delay3{ transition-delay: .45s; }
.js_fade.js_delay4{ transition-delay: .6s; }
.gjs-dashed .js_fade{
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce){
  .mv_img img{ animation: none; }
  .js_fade{ opacity: 1; transform: none; transition: none; }
}