/*
Theme Name: YahiroBC Corporate Landing (WEBEE LAB.)
Theme URI: https://webee-lab.example/
Author: WEBEE LAB.
Author URI: https://webee-lab.com/
Description: 株式会社日本拳闘クラブのコーポレートLP用オリジナルテーマ。Newsは投稿で運用。SEO/OGP/JSON-LD対応。
Version: 1.0.0
Text Domain: jbc-corporate-webeelab
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ↓↓↓ ここから下に、あなたのCSSを丸ごと貼り付け（<style>の中身） ↓↓↓ */
      /* --- 1. CORE STYLES --- */
      :root {
        --c-white: #ffffff;
        --c-navy: #0f172a;
        --c-dark: #111111;
        --c-gray-bg: #f8fafc;
        --c-accent: #0ea5e9;
        --c-gold: #c5a059;
        --c-text: #334155;
        --c-text-light: #64748b;

        --f-jp: "Noto Sans JP", sans-serif; /* 標準テキスト */
        --f-mincho: "Zen Old Mincho", serif; /* FV・和風見出し用 (リュウミンイメージ) */
        --f-en: "Manrope", sans-serif; /* 英語テキスト */
        --f-title: "Anton", sans-serif; /* 英語見出し */

        --easing: cubic-bezier(0.23, 1, 0.32, 1);
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: var(--f-jp);
        color: var(--c-text);
        background-color: var(--c-white);
        line-height: 1.8;
        letter-spacing: 0.04em;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

      h1,
      h2,
      h3,
      h4 {
        margin: 0;
      }
      img {
        width: 100%;
        height: auto;
        display: block;
      }
      a {
        text-decoration: none;
        color: inherit;
        transition: opacity 0.3s;
      }
      ul,
      ol {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      iframe {
        border: 0;
        width: 100%;
        height: 100%;
        display: block;
      }
      /* PCでは折り返さない */
      .u-br-sp { display: none; }

      /* スマホだけ折り返す */
      @media (max-width: 768px){
        .u-br-sp { display: inline; }
      }

      .l-container {
        width: 88%;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
      }

      .l-section {
        padding: 120px 0;
      }
      @media (max-width: 768px) {
        .l-section {
          padding: 80px 0;
        }
      }

      /* 見出しデザイン (共通) */
      .c-section-header {
        margin-bottom: 60px;
        text-align: center;
      }
      .c-section-header.is-left {
        text-align: left;
      } /* 左寄せ用 */

      .c-section-header__en {
        display: block;
        font-family: var(--f-title);
        font-size: 3.5rem;
        color: var(--c-navy);
        line-height: 1;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .c-section-header__jp {
        display: block;
        font-size: 1rem;
        color: var(--c-accent);
        font-weight: 700;
        letter-spacing: 0.1em;
      }

      /* --- BUTTON DESIGN (Revised) --- */
      .c-btn {
        display: inline-flex; /* フレックスボックスで中央揃え */
        align-items: center;
        justify-content: center;
        padding: 16px 40px;
        border: 1px solid var(--c-navy);
        background-color: #fff; /* 白背景で視認性アップ */
        color: var(--c-navy);
        font-family: var(--f-en);
        font-weight: 700;
        font-size: 0.9rem;
        letter-spacing: 0.1em;
        position: relative;
        overflow: hidden;
        transition: all 0.3s var(--easing);
        cursor: pointer;
        text-transform: uppercase;
        margin-top: 20px;
      }
      /* 矢印アイコンの追加 */
      .c-btn::after {
        content: "→";
        font-family: sans-serif;
        margin-left: 10px;
        transition: transform 0.3s var(--easing);
      }
      /* ホバー時の挙動 */
      .c-btn:hover {
        background-color: var(--c-navy);
        color: #fff;
        box-shadow: 0 5px 15px rgba(15, 23, 42, 0.2);
      }
      .c-btn:hover::after {
        transform: translateX(5px); /* 矢印が右に動く */
      }

      /* --- HEADER --- */
      .l-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1000;
        transition:
        background 0.3s,
        padding 0.3s;
      }
      @media (max-width: 900px) {
      .l-header {
        padding: 10px 20px;
      }        
      }
      .l-header.is-scrolled {
        background: rgba(255, 255, 255, 0.95);
        padding: 15px 40px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
      }
      @media (max-width: 900px) {
      .l-header.is-scrolled {
        padding: 10px 20px;
      }        
      }
      .p-logo {
        font-family: var(--f-mincho);
        font-weight: 900;
        font-size: 1.5rem;
        letter-spacing: 0.1em;
        color: var(--c-navy);
      }
      @media (max-width: 767px) {
      .p-logo {
        font-size: 1rem;
      }
      }      
      .p-nav ul {
        display: flex;
        gap: 30px;
      }
      .p-nav a {
        font-family: var(--f-title);
        font-size: 0.9rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        position: relative;
        color: var(--c-navy);
      }
      @media (max-width: 900px) {
        .p-nav {
          display: none;
        }
      }

      /* --- HERO AREA --- */
      .p-hero {
        height: 100vh;
        width: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--c-white);
      }
      .p-hero__bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("./img/hero-img.webp") no-repeat center / cover;
        z-index: -2;
        filter: brightness(0.4);
      }
      .p-hero__content {
        text-align: center;
        z-index: 1;
        padding: 0 20px;
        width: 100%;
      }

      .p-hero__title-jp {
        font-family: var(--f-mincho);
        font-weight: 700;
        font-size: clamp(22px, 5.5vw, 80px);
        line-height: 1.6;
        margin-bottom: 30px;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        letter-spacing: 0.15em;
        visibility: visible;
      }
      .p-hero__char {
        display: inline-block;
        opacity: 0;
        transform: translateY(10px);
        filter: blur(8px);
        will-change: opacity, transform, filter;
      }
      @media (max-width: 768px) {
        .p-hero__title-jp {
          text-align: left;
        }
      }

      /* --- CONCEPT & MESSAGE COMMON DESIGN --- */
      .p-lead-text {
        font-family: var(--f-mincho);
        font-size: 2rem;
        font-weight: 700;
        color: var(--c-navy);
        margin-bottom: 40px;
        line-height: 1.6;
        text-align: center;
      }
      @media (max-width: 768px) {
        .p-lead-text {
          font-size: 1.3rem;
        }
      }      
      .p-body-text {
        font-size: 1rem;
        line-height: 2.2;
        text-align: justify;
        margin-bottom: 30px;
      }
      .p-body-text strong {
        color: var(--c-accent);
        font-size: 1.2em;
      }

      /* --- CONCEPT --- */
      .p-concept {
        background-color: #fff;
      }
      .p-concept__inner {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
      }

      /* --- MESSAGE --- */
      .p-message {
        background-color: #fff;
      }

      .p-message__header-area {
        max-width: 800px;
        margin: 0 auto 60px;
        text-align: center;
      }

      .p-message__content {
        display: flex;
        align-items: flex-start;
        gap: 60px;
      }

      .p-message__img {
        width: 40%;
        position: sticky;
        top: 120px;
      }
      .p-message__img img {
        width: 100%;
        height: auto;
        border-radius: 4px;
        box-shadow: 20px 20px 0 var(--c-gray-bg);
      }

      .p-message__body {
        width: 55%;
      }

      .p-mission-box {
        background-color: #f8fafc;
        border-left: 5px solid var(--c-gold);
        padding: 30px;
        margin-bottom: 30px;
        border-radius: 0 4px 4px 0;
      }
      .p-mission-head {
        font-family: var(--f-mincho);
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--c-navy);
        margin-bottom: 15px;
        display: block;
      }
      .p-mission-core {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 15px;
        color: var(--c-text);
      }

      .p-message__text {
        color: var(--c-text);
        margin-bottom: 30px;
        text-align: justify;
        font-size: 0.95rem;
        line-height: 2;
      }

      .p-message__profile {
        margin-top: 30px;
        text-align: right;
      }
      .p-message__name {
        font-family: var(--f-mincho);
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 5px;
      }
      .p-message__role {
        font-size: 0.9rem;
        color: var(--c-gold);
        font-weight: 700;
      }

      @media (max-width: 900px) {
        .p-message__content {
          flex-direction: column;
          gap: 40px;
        }
        .p-message__img,
        .p-message__body {
          width: 100%;
        }
        .p-message__img {
          position: static;
          box-shadow: 10px 10px 0 var(--c-gray-bg);
        }
      }

      /* --- BUSINESS --- */
      .p-business {
        background-color: var(--c-gray-bg);
      }
      .p-biz-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 120px;
      }
      .p-biz-row:last-child {
        margin-bottom: 0;
      }
      .p-biz-row:nth-child(even) {
        flex-direction: row-reverse;
      }

      .p-biz-img {
        width: 48%;
        height: 380px;
        position: relative;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
      }
      .p-biz-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.2s var(--easing);
      }
      .p-biz-row:hover .p-biz-img img {
        transform: scale(1.05);
      }

      .p-biz-content {
        width: 45%;
      }
      .p-biz-no {
        font-family: var(--f-title);
        font-size: 3rem;
        color: #cbd5e1;
        line-height: 1;
        margin-bottom: 10px;
        display: block;
      }
      .p-biz-title {
        font-size: 1.6rem;
        margin-bottom: 20px;
        font-weight: 700;
        color: var(--c-navy);
      }
      .p-biz-desc {
        margin-bottom: 25px;
        color: var(--c-text-light);
        font-size: 0.95rem;
        text-align: justify;
        line-height: 1.8;
      }
      .p-biz-desc strong {
        color: var(--c-navy);
        font-weight: 700;
        background: linear-gradient(transparent 60%, #e0f2fe 60%);
      }
      .p-biz-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
      }
      .p-biz-tag {
        font-size: 0.75rem;
        padding: 6px 14px;
        background: #fff;
        border: 1px solid #e2e8f0;
        font-weight: 700;
        color: var(--c-text-light);
      }

      @media (max-width: 768px) {
        .p-biz-row,
        .p-biz-row:nth-child(even) {
          flex-direction: column;
          margin-bottom: 80px;
        }
        .p-biz-img,
        .p-biz-content {
          width: 100%;
        }
        .p-biz-img {
          height: 250px;
          margin-bottom: 30px;
        }
      }

      /* --- COMPANY --- */
      .p-company-table {
        width: 100%;
        border-collapse: collapse;
      }
      .p-company-table th,
      .p-company-table td {
        padding: 20px;
        border-bottom: 1px solid #eee;
        text-align: left;
      }
      .p-company-table th {
        width: 30%;
        color: var(--c-navy);
        background: #fafafa;
      }
      @media (max-width: 600px) {
        .p-company-table th,
        .p-company-table td {
          display: block;
          width: 100%;
        }
        .p-company-table th {
          border-bottom: none;
        }
      }

      /* --- ACCESS --- */
      .p-access-map {
        width: 100%;
        height: 450px;
        background: #eee;
        margin-top: 40px;
      }

      /* --- RECRUIT INFO --- */
      .p-recruit-info {
        background: #fff;
      }
      .p-recruit-intro {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 60px;
      }
      .p-recruit-intro h3 {
        font-size: 1.5rem;
        margin-bottom: 25px;
        color: var(--c-navy);
        line-height: 1.6;
      }
      @media (max-width: 768px) {
        .p-recruit-intro h3 {
          font-size: 1.1rem;
        }
      }
      .p-recruit-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        max-width: 1100px;
        margin: 0 auto;
      }
      .p-recruit-card {
        background: #f8fafc;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        border: 1px solid #eee;
        transition: transform 0.3s;
      }
      @media (max-width: 768px) {
        .p-recruit-card {
          padding: 30px 16px;
        }
      }
      .p-recruit-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      }
      .p-recruit-head {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--c-navy);
        margin-bottom: 30px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
       @media (max-width: 768px) {
        .p-recruit-head {
          font-size: 1.15rem;
        }
       }
      .p-recruit-head::before,
      .p-recruit-head::after {
        content: "";
        display: block;
        width: 30px;
        height: 2px;
        background: var(--c-gold);
        margin: 0 15px;
      }
      .p-recruit-list {
        counter-reset: num;
      }
      .p-recruit-list li {
        margin-bottom: 15px;
        padding: 15px 15px 15px 50px;
        background: #fff;
        border-radius: 8px;
        position: relative;
        font-weight: 700;
        color: var(--c-text);
        font-size: 0.95rem;
        line-height: 1.4;
      }
      .p-recruit-list li::before {
        counter-increment: num;
        content: counter(num);
        position: absolute;
        left: 15px;
        top: 15px;
        width: 24px;
        height: 24px;
        background: var(--c-navy);
        color: #fff;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        font-size: 0.8rem;
        font-family: var(--f-title);
      }
      .p-recruit-list span {
        display: block;
        font-weight: 400;
        font-size: 0.85rem;
        color: var(--c-text-light);
        margin-top: 5px;
      }
      .p-recruit-card.is-policy .p-recruit-list li::before {
        background: var(--c-gold);
      }
      @media (max-width: 768px) {
        .p-recruit-grid {
          grid-template-columns: 1fr;
        }
      }

      /* --- CONTACT & CTA --- */
      .p-cta-section {
        background-color: var(--c-gray-bg);
        padding: 100px 0;
      }
      .p-cta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        max-width: 1000px;
        margin: 0 auto;
      }
      .p-cta-card {
        padding: 60px 40px;
        text-align: center;
        border-radius: 4px;
        transition: transform 0.3s;
        border: 1px solid #eee;
        background: #fff;
      }
      .p-cta-card--recruit {
        background: var(--c-navy);
        color: #fff;
        border: none;
      }
      .p-cta-card--recruit:hover {
        transform: translateY(-5px);
      }
      .p-cta-title {
        font-family: var(--f-title);
        font-size: 2.5rem;
        margin-bottom: 15px;
        letter-spacing: 0.05em;
      }
      .p-cta-text {
        font-size: 0.95rem;
        margin-bottom: 35px;
        opacity: 0.9;
      }
      .c-btn-recruit {
        display: inline-block;
        padding: 18px 50px;
        background: var(--c-gold);
        color: #fff;
        font-weight: 700;
        transition: all 0.3s;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        text-decoration: none;
      }
      @media (max-width: 768px) {
        .c-btn-recruit {
          padding: 20px 40px;
          font-size: 1rem;
        }
      }
      .c-btn-recruit:hover {
        background: #fff;
        color: var(--c-gold);
      }
      .p-cta-card--contact:hover {
        transform: translateY(-5px);
      }
      .c-btn-contact {
        display: inline-block;
        padding: 18px 50px;
        background: transparent;
        border: 1px solid var(--c-navy);
        color: var(--c-navy);
        font-weight: 700;
        transition: all 0.3s;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        text-decoration: none;
      }
      @media (max-width: 768px) {
        .c-btn-contact {
          padding: 20px 40px;
          font-size: 1rem;
        }
      }
      .c-btn-contact:hover {
        background: var(--c-navy);
        color: #fff;
      }
      @media (max-width: 768px) {
        .p-cta-grid {
          grid-template-columns: 1fr;
          gap: 20px;
        }
      }
      /* --- NEWS SECTION --- */
      .p-news {
        background-color: #fff;
      }
      .p-news-list {
        max-width: 800px;
        margin: 0 auto 40px;
        border-top: 1px solid #eee;
      }

      .p-news-item {
        display: flex;
        align-items: center;
        padding: 25px 0;
        border-bottom: 1px solid #eee;
        text-decoration: none;
        transition:
          background-color 0.3s,
          padding-left 0.3s;
      }
      .p-news-item:hover {
        background-color: #fafafa;
        padding-left: 10px;
      }

      .p-news-meta {
        display: flex;
        align-items: center;
        min-width: 180px;
        gap: 15px;
      }
      .p-news-date {
        font-family: var(--f-en);
        font-size: 0.9rem;
        color: var(--c-text-light);
      }
      .p-news-cat {
        font-size: 0.75rem;
        background-color: var(--c-navy);
        color: #fff;
        padding: 4px 10px;
        border-radius: 2px;
      }
      .p-news-title {
        color: var(--c-text);
        font-weight: 500;
        margin: 0;
        flex: 1;
      }
      .p-news-btn-area {
        text-align: center;
      }

      @media (max-width: 600px) {
        .p-news-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }
        .p-news-meta {
          min-width: auto;
        }
      }
      /* --- FOOTER --- */
      .l-footer {
        background: var(--c-navy);
        color: var(--c-white);
        padding: 80px 0 30px;
      }
      .p-footer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 60px;
        margin-bottom: 60px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 60px;
      }
      .p-footer-logo {
        font-family: var(--f-mincho);
        font-size: 1.8rem;
        font-weight: 900;
        margin-bottom: 25px;
        letter-spacing: 0.1em;
      }
      @media (max-width: 768px) {
      .p-footer-logo {
        font-size: 1.5rem;
      }
      }
      .p-footer-address {
        font-size: 0.9rem;
        line-height: 1.8;
        opacity: 0.8;
      }
      .p-footer-nav-title {
        font-family: var(--f-title);
        font-size: 1.2rem;
        color: var(--c-accent);
        margin-bottom: 20px;
        letter-spacing: 0.05em;
      }
      .p-footer-nav-list li {
        margin-bottom: 15px;
      }
      .p-footer-nav-list a {
        opacity: 0.7;
        transition: opacity 0.3s;
        font-size: 0.9rem;
      }
      .p-footer-nav-list a:hover {
        opacity: 1;
      }
      .p-copyright {
        text-align: center;
        font-size: 0.8rem;
        opacity: 0.5;
        font-family: var(--f-en);
      }
      @media (max-width: 768px) {
        .p-footer-grid {
          grid-template-columns: 1fr;
          gap: 40px;
          text-align: left;
        }
      }

      /* GSAP */
      .js-fade-up {
        opacity: 0;
        transform: translateY(30px);
      }

/* 親要素：ボタンを横並びにする */
.p-biz-links {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

/* Instagramボタン：丸から四角（角丸）へ変更 */
.c-btn-insta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;  /* サイズ */
    height: 46px; /* サイズ */
    
    /* 四角形の形状設定 */
    border-radius: 12px; /* ここを 0 にすれば完全な真四角になります */
    
    /* Instagram風のグラデーション背景 */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    
    color: #fff !important;
    font-size: 26px; /* アイコンの大きさ */
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* ホバー時の演出（少し浮き上がる） */
.c-btn-insta:hover {
    transform: translateY(-3px);
    opacity: 0.9;
    box-shadow: 0 5px 12px rgba(0,0,0,0.2);
}

/* 既存のボタンとの微調整 */
.c-btn {
    margin-top: 0 !important;
}