:root {
    --font-ja: 'Noto Sans JP', sans-serif;
    --font-en: 'Poppins', sans-serif;
    --main-black: #1a1a1a;
    --border-gray: #e0e0e0;
    --grid-line: #e8e8e8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-ja);
    color: var(--main-black);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f6f6f6;
}
main { flex: 1; }

/* =========================================
   2. ヘッダー (PC 確定版)
   ========================================= */
.header { border-bottom: 1px solid #111; padding: 30px 40px; background-color: #fff; }
.header-inner { display: flex; justify-content: space-between; align-items: flex-end; }
.logo-desc { font-size: 14px; font-weight: 500; display: block; margin-bottom: 10px; } 
.logo-area { display: flex; align-items: flex-end; gap: 8px; }
.logo-img { height: 50px; width: auto; }
.logo-temp { font-size: 17px; font-weight: 500; padding-bottom: 2px; }
.header-right-group { display: flex; align-items: flex-end; gap: 40px; }
.header-pc-links { display: flex; align-items: flex-end; gap: 40px; }
.nav-links { display: flex; list-style: none; gap: 25px; }
.nav-links a { text-decoration: underline; color: var(--main-black); font-size: 16px; font-weight: 700; transition: 0.3s; }
.sns-icons { display: flex; gap: 24px; } 
.sns-img { width: 25px; height: 25px; object-fit: contain; }
.date-display { display: flex; align-items: flex-end; font-family: var(--font-en); gap: 8px; line-height: 1.0; }
.date-main { font-size: 56px; font-weight: 500; letter-spacing: -0.02em; line-height: 0.85; }
.date-sub { display: flex; flex-direction: column; justify-content: space-between; height: 48px; padding: 1px 0; }
.date-sub .year { font-size: 16px; font-weight: 500; }
.date-sub .day-of-week { font-size: 20px; font-weight: 600; }

/* =========================================
   3. パンくず・ヒーロー
   ========================================= */
.breadcrumb { background-color: #f6f6f6; border-bottom: 1px solid #111; }
.breadcrumb-inner { padding: 17px 40px; font-size: 16px; font-weight: 700; display: flex; align-items: center; }
.breadcrumb-link { color: var(--main-black); text-decoration: none; position: relative; padding-bottom: 2px; white-space: nowrap; }
.breadcrumb-link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--main-black); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; }
.breadcrumb-link:hover::after { transform: scaleX(1); transform-origin: left; }
.divider { margin: 0 15px; font-weight: 400; }
.current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; }
.hero { background-color: #f6f6f6; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 20px 20px; padding: 80px 40px; text-align: center; border-bottom: 1px solid #111; }
.hero-sub { font-size: 18px; margin-bottom: 10px; }
.hero-main { font-family: var(--font-en); font-size: 64px; font-weight: 600; }

/* =========================================
   4. 黒丸メニュー (確定版)
   ========================================= */
.menu-trigger { position: fixed; top: 20px; right: 20px; width: 56px; height: 56px; background: #111; border-radius: 50%; border: none; z-index: 3000; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.4s; opacity: 0; visibility: hidden; }
.menu-trigger.is-show { opacity: 1; visibility: visible; }
.menu-trigger__lines span { display: block; width: 30px; height: 1px; background: #fff; transition: 0.3s; }
.menu-trigger__lines span:first-child { margin-bottom: 5px; }
.menu-trigger__text { color: #fff; font-size: 10px; font-weight: 600; font-family: var(--font-en); margin-top: 2px; }

.side-menu { position: fixed; top: 20px; right: 20px; width: 243px; background: #111; border-radius: 12px; z-index: 4000; padding: 60px 30px 40px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: 0.4s; }
.side-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-close { position: absolute; top: 25px; right: 25px; background: none; border: none; width: 30px; height: 30px; cursor: pointer; }
.close-icon { position: relative; display: block; width: 100%; height: 1px; background: #fff; transform: rotate(25deg); }
.close-icon::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #fff; transform: rotate(-50deg); }
.side-menu__nav li { list-style: none; margin-bottom: 25px; }
.side-menu__nav a , .side-menu__nav button { color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; position: relative; padding-bottom: 4px; }
.side-menu__nav a::after , .side-menu__nav button::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; }
.side-menu__nav a:hover::after , .side-menu__nav button:hover::after  { transform: scaleX(1); transform-origin: left; }

.side-menu__sns { display: flex; gap: 20px; margin-top: 40px; }
.side-menu__sns img { width: 20px; filter: brightness(0) invert(1); }

/* =========================================
   5. WHO WE ARE (統合・確定版)
   ========================================= */
.common-footer-content { background-color: #f6f6f6; padding: 140px 60px; border-top: 1px solid #000; }
.who-we-are { max-width: 1200px; margin: 0 auto; }
.who-we-are__header { text-align: center; margin-bottom: 60px; padding-bottom: 40px; background-image: linear-gradient(to right, #000 50%, transparent 50%); background-position: bottom; background-size: 9px 1px; background-repeat: repeat-x; }
.who-we-are__sub { font-size: 16px; font-weight: 700; margin-bottom: 15px; letter-spacing: 0.06em; }
.who-we-are__title-wrap { display: flex; align-items: center; justify-content: center; gap: 90px; }
.who-we-are__title { font-family: var(--font-en); font-size: 64px; font-weight: 600; letter-spacing: 0.05em; line-height: 1.0; }
.who-we-are__icon-left, .who-we-are__icon-right { width: 100px; height: auto; }
.who-we-are__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 80px; }

.who-we-are__card { background: #fff; text-decoration: none; color: inherit; transition: 0.3s ease; border-radius: 16px; padding: 20px; border: 1px solid #000; }
.who-we-are__card:hover { transform: translateY(-5px); }

/* 修正：縦並び(column)を正とし、高さを揃える */
.who-we-are__card-inner { 
    border-radius: 16px; 
    padding: 24px; 
    height: 100%; 
    border: 1px dashed #ccc; 
    display: flex; 
    flex-direction: column; 
}
.who-we-are__card-text { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
}
.who-we-are__card-sub { font-size: 14px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: start; gap: 8px; letter-spacing: 0.06em; }
.who-we-are__star { width: 14px; height: auto; padding-top: 5px; }
.who-we-are__card-title { font-size: 26px; font-weight: 700; line-height: 1.4; margin-bottom: 20px; letter-spacing: 0.06em; }

/* 195行目付近：縦並びから横並び（Flexbox）に変更 */
.who-we-are__card-body { 
    flex: 1; 
    display: flex; 
    justify-content: space-between; /* テキストと画像を左右に分ける */
    align-items: flex-start;       /* テキストを上に揃える */
    gap: 20px;                     /* テキストと画像の間の隙間 */
}
/* 201行目付近：横並び時にテキストが広がるように設定 */
.who-we-are__card-desc { 
    flex: 1;               /* 残りの幅をすべて使う */
    font-size: 14px; 
    line-height: 1.7; 
    padding-top: 4px;      /* 見出しとの高さの微調整 */
    letter-spacing: 0.06em;
    margin-bottom: 0;      /* 横並びなので下の余白をリセット */
}
.who-we-are__card-img {
    align-self: flex-end;      /* 親が横並びでも、これだけで下揃えになる */
    flex-shrink: 0;           /* 横幅が狭くなっても画像が潰れないようにする */
}
.who-we-are__card-img img { display: block; height: 170px; width: auto; max-width: 100%; }

.who-we-are__card-footer { width: 100%; }
.who-we-are__viewmore { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--main-black); width: fit-content; padding-bottom: 3px; }
.who-we-are__viewmore img { width: 16px; }

/* =========================================
   6. フッター (PC 確定版)
   ========================================= */
.footer { background-color: #1a1a1a; color: #fff; padding: 100px 64px 120px; border-radius: 26px 26px 0 0; margin: 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; }
.footer-logo-svg { display: block; width: 200px; max-width: 100%; height: auto; margin-bottom: 40px; }
.footer-desc { font-size: 14px; margin-bottom: 12px; }
.copyright { font-size: 12px; opacity: 0.7; margin-left: 8px; }
.footer-left { min-width: 200px; }
.footer-right { display: flex; flex-direction: column; align-items: flex-end; }
.footer-nav ul { list-style: none; display: flex; gap: 32px; margin-bottom: 64px; }
.footer-nav a { 
    color: #fff; 
    text-decoration: none; 
    font-size: 16px; 
    font-weight: 500; 
    position: relative; 
    padding-bottom: 4px; 
}

/* アンダーラインの本体（初期状態は消しておく） */
.footer-nav a::after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 1px; 
    background: #fff; 
    transform: scaleX(0); 
    transform-origin: right; 
    transition: transform 0.3s ease; 
}

/* マウスオーバー時にスーッと出す */
.footer-nav a:hover::after { 
    transform: scaleX(1); 
    transform-origin: left; 
}
.footer-sns { display: flex; gap: 40px; justify-content: flex-end; width: 100%; }
.sns-icon { width: 24px; height: 24px; filter: brightness(0) invert(1); }

/* =========================================
   7. メディアクエリ (レスポンシブ統合版)
   ========================================= */

/* フッターのみ1024pxでスマホレイアウトに (1024x以下) */
@media (max-width: 1093px) {
    .footer { padding: 60px 24px 80px; }
    .footer-inner { flex-direction: column; }
    .footer-right { order: -1; margin-bottom: 40px; width: 100%; align-items: flex-start; }
    .footer-nav ul { flex-direction: column; gap: 16px; margin-bottom: 32px; }
    .footer-sns { justify-content: flex-start; gap: 20px; }
    .footer-logo-svg { width: 150px; max-width: 100%; margin-bottom: 12px; }   
    }

/* iPad Pro (834px以下) */
@media (max-width: 834px) {
    .pc-only { display: none; }
    .header { padding: 15px 20px; }
    .logo-desc { font-size: 9px; margin-bottom: 2px; }
    .logo-img { height: 30px; }
    .logo-temp { font-size: 12px; }
    .date-display { gap: 6px; }
    .date-main { font-size: 34px; }
    .date-sub { height: 28px; }
    .date-sub .year { font-size: 10px; }
    .date-sub .day-of-week { font-size: 12px; }
}

/* iPad 縦向き調整 (769px〜1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .common-footer-content { padding: 80px 40px; }
    .who-we-are__title { font-size: 48px; }
    .who-we-are__card-title { font-size: 22px; }
    .who-we-are__card-img img { height: 130px; }
}

/* スマホ完全切り替え (768px以下) */
@media (max-width: 768px) {
    .hero { padding: 60px 20px; }
    .hero-sub { font-size: 16px; }
    .hero-main { font-size: 28px; }
    .breadcrumb-inner { padding: 12px 20px; font-size: 12px; }
    .common-footer-content { padding: 60px 20px; }
    .who-we-are__header { padding-bottom: 30px; margin-bottom: 40px; }
    .who-we-are__title-wrap { gap: 15px; }
    .who-we-are__title { font-size: 28px; }
    .who-we-are__icon-left, .who-we-are__icon-right { width: 40px; }
    .who-we-are__grid { grid-template-columns: 1fr; margin-top: 30px; }
    .who-we-are__card { padding: 15px; }
    .who-we-are__card-inner { padding: 20px; }
    .who-we-are__card-img img { height: 120px; }
    .footer-desc { font-size: 10px; }
    .copyright { font-size: 10px; margin-top: 20px; }
    .who-we-are__card-body { 
    flex-direction: column; /* スマホでは縦並びに戻す */
}
}



/* Complianzのボタンをリンクと同じ見た目にする */
.cmplz-manage-consent {
    background: none;        /* 背景を消す */
    border: none;            /* 枠線を消す */
    padding: 0;              /* 余白を消す */
    margin: 0;               /* 外側の余白を消す */
    color: #ffffff;          /* 文字色を周りと合わせる（白の場合） */
    font-size: inherit;      /* 文字サイズを周りと合わせる */
    font-family: inherit;    /* フォントを周りと合わせる */
    cursor: pointer;         /* マウスを乗せた時に指マークにする */
    text-decoration: underline; /* リンクっぽく下線をつける場合 */
}

/* マウスホバー時の挙動（必要であれば） */
/*
.cmplz-manage-consent:hover {
    opacity: 0.8;
}*/
.footer-nav .cmplz-manage-consent { 
    color: #fff; 
    text-decoration: none; 
    font-size: 16px; 
    font-weight: 500; 
    position: relative; 
    padding-bottom: 4px; 
}

/* アンダーラインの本体（初期状態は消しておく） */
.footer-nav .cmplz-manage-consent::after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 1px; 
    background: #fff; 
    transform: scaleX(0); 
    transform-origin: right; 
    transition: transform 0.3s ease; 
}

/* マウスオーバー時にスーッと出す */
.footer-nav .cmplz-manage-consent:hover::after { 
    transform: scaleX(1); 
    transform-origin: left; 
}


/* 404ページのレイアウト設定 */
.not-found-container {
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    min-height: 60vh;        /* 画面の高さの60%を確保（上下マージンの代わり） */
    padding: 60px 20px;      /* 上下にしっかりマージンを入れる */
    text-align: center;      /* テキストをセンターに */
}

.not-found-inner h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.not-found-inner p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
    color: #333;
}

/* ボタンの装飾（お好みで） */
.back-btn {
    display: inline-block;
    background: #333;
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 5px;
    transition: opacity 0.3s;
}

.back-btn:hover {
    opacity: 0.8;
}

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
    .not-found-container {
        min-height: 40vh;
        padding: 40px 20px;
    }
    .not-found-inner h1 {
        font-size: 1.8rem;
    }
}


/*
404ページのレイアウト
*/

/* 404ページのレイアウト設定 */
.not-found-container {
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    min-height: 60vh;        /* 画面の高さの60%を確保（上下マージンの代わり） */
    padding: 60px 20px;      /* 上下にしっかりマージンを入れる */
    text-align: center;      /* テキストをセンターに */
}

.not-found-inner h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.not-found-inner p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
    color: #333;
}

/* ボタンの装飾（お好みで） */
.back-btn {
    display: inline-block;
    background: #333;
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 5px;
    transition: opacity 0.3s;
}

.back-btn:hover {
    opacity: 0.8;
}

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
    .not-found-container {
        min-height: 40vh;
        padding: 40px 20px;
    }
    .not-found-inner h1 {
        font-size: 1.8rem;
    }
}