@charset "utf-8";

/* THEME COLORS
---------------------------------------- */
:root {
    /* Primary AD5（ライムグリーン） */
    --primary-ad5: #AD5;
    --primary-ad5-pastel: #C3E588;
    --primary-ad5-accent: #99CC44;
    --primary-ad5-surface: #FAFFF5;    /* ほぼ白（薄〜いライムグリーン） */
    
    /* Secondary AD5（グレー系） */
    --secondary-ad5: #6C727E;
    --secondary-ad5-pastel: #9CA3AF;
    --secondary-ad5-accent: #4B5563;
    --secondary-ad5-surface: #FAFBFC;   /* ほぼ白（薄〜いグレー） */
    
    /* Tertiary AD5（濃いグレー） */
    --tertiary-ad5: #111826;
    --tertiary-ad5-pastel: #374151;    /* ミディアムグレー */
    --tertiary-ad5-accent: #030712;    /* ほぼ黒 */
    --tertiary-ad5-surface: #F9FAFB;   /* ほぼ白（薄〜いグレー） */
    
    /* Green（エメラルドグリーン - 開発セクション） */
    --colors-green: #52CC7E;
    --colors-green-pastel: #7DDBA0;
    --colors-green-accent: #3AB365;
    
    /* Blue（スカイブルー - エンジニアリングセクション） */
    --colors-blue: #63B0DD;
    --colors-blue-pastel: #8AC4E7;
    --colors-blue-accent: #4A9ACC;
    
    /* Purple（パープル - 製品セクション） */
    --colors-purple: #8F62DD;
    --colors-purple-pastel: #AB8BE7;
    --colors-purple-accent: #7A4ACC;
    
    /* Pink（ピンク - 採用セクション） */
    --colors-pink: #DD69B3;
    --colors-pink-pastel: #E792CA;
    --colors-pink-accent: #CC4A9A;
    
    /* Coral（コーラル - 会社概要セクション） */
    --colors-coral: #F17B77;
    --colors-coral-pastel: #F5A19E;
    --colors-coral-accent: #E85C58;
    
    /* Text Colors（テキストカラー） */
    --text-strong: #0F172A;      /* 最も濃い - 見出しや強調 */
    --text-black: #1E293B;       /* 濃い黒 - 本文メイン */
    --text-flat: #334155;        /* 標準 - 通常テキスト */
    --text-label: #475569;       /* ラベル - フォームラベル等 */
    --text-gray: #64748B;        /* グレー - サブテキスト */
    --text-muted: #94A3B8;       /* 薄い - 補足情報 */
    --text-disabled: #CBD5E1;    /* 無効 - 非活性要素 */
    --text-placeholder: #E2E8F0; /* プレースホルダー */
    
    /* カラー背景上のテキスト（ボタン・バナー等） */
    --text-white: #F8FAFC;       /* 白 - メイン */
    --text-white-strong: #FFFFFF; /* 純白 - 見出しや強調 */
    --text-white-flat: #F1F5F9;   /* 標準 - 通常テキスト */
    --text-white-label: #E2E8F0;  /* ラベル */
    --text-white-gray: #CBD5E1;   /* グレー - サブテキスト */
    --text-white-muted: #E5E7EB;  /* 薄い - 補足情報 */
    --text-white-disabled: #64748B; /* 無効 - 非活性要素 */
    --text-white-placeholder: #475569; /* プレースホルダー */
    
    /* Background Colors（背景色） */
    --bg-colors-black: #1E293B;    /* 濃い背景 */
    --bg-colors-gray: #94A3B8;     /* グレー背景 */
    --bg-colors-muted: #CBD5E1;    /* 薄いグレー */
    --bg-colors-surface: #F1F5F9;  /* サーフェス - カード背景等 */
    --bg-colors-background: #F8FAFC; /* ベース背景 */
    --bg-colors-white: #FFFFFF;    /* 純白 */
    --bg-colors-border: #E2E8F0;   /* ボーダー用 */
    --bg-colors-accent: #F3F4F6;   /* アクセント背景 */
    
    /* Gradient Colors（グラデーション） */
    --bg-gradient-typography: linear-gradient(120deg, var(--bg-colors-background), var(--bg-colors-surface));
}

/* RESET
---------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}

ul,ol {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}

a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; outline:none;}

del {text-decoration:line-through;}

abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}

table {border-collapse:collapse; border-spacing:0;}

input, select {vertical-align:middle;}

img {vertical-align:bottom; border:none; font-size:0; line-height:0;}

em {font-style:normal;}

body {-webkit-text-size-adjust:none; font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ƒqƒ‰ƒMƒmŠpƒS ProN W3', 'ƒ‚ƒŠƒTƒ VƒS R', 'Droid Sans', ƒƒCƒŠƒI, 'sans-serif'; font-size:14px; color: var(--text-black);}

address {font-style:normal;}
h1,h2,h3,h4,h5,h6,strong,b {color: var(--text-strong);}
label,th {color: var(--text-label);}
small,.text-muted {color: var(--text-muted);}
::placeholder {color: var(--text-placeholder);}
:disabled,[disabled] {color: var(--text-disabled);}

* {box-sizing: border-box;}

/*
 *	COMMON CLASS
 *
 *------------------------------------*/

* {
    transition-property: width, height, top, left, opacity, transform;
    transition-duration: 1.2s;
}

a {transition-duration: 0.3s;}
a:hover {opacity: 0.7;}
a.bg-1:hover, a.bg-2:hover, a.bg-3:hover, a.bg-4:hover, a.bg-5:hover, a.bg-6:hover {opacity: 0.8;}
a:has(> .bg-1):hover, a:has(> .bg-2):hover, a:has(> .bg-3):hover, a:has(> .bg-4):hover, a:has(> .bg-5):hover, a:has(> .bg-6):hover {opacity: 0.8;}
a.logo:hover, a:has(> .logo):hover {opacity: 0.75;}

img {max-width: 100%; height: auto;}

.bg-1 {background: var(--primary-ad5); color: var(--text-white);}
.bg-2 {background: var(--colors-green); color: var(--text-white);}
.bg-3 {background: var(--colors-blue); color: var(--text-white);}
.bg-4 {background: var(--colors-purple); color: var(--text-white);}
.bg-5 {background: var(--colors-pink); color: var(--text-white);}
.bg-6 {background: var(--colors-coral); color: var(--text-white);}
.bg-primary {background: var(--primary-ad5); color: var(--text-white);}
.fc-1 {color: var(--primary-ad5);}
.fc-2 {color: var(--colors-green);}
.fc-3 {color: var(--colors-blue);}
.fc-4 {color: var(--colors-purple);}
.fc-5 {color: var(--colors-pink);}
.fc-6 {color: var(--colors-coral);}
.fc-primary {color: var(--primary-ad5);}
.fc-black {color: var(--text-flat);}

.mb-1 {margin-bottom: min(1vw, 10px) !important;}
.mb-2 {margin-bottom: min(2vw, 20px) !important;}
.mb-3 {margin-bottom: min(3vw, 30px) !important;}
.mb-4 {margin-bottom: min(4vw, 40px) !important;}
.mb-5 {margin-bottom: min(5vw, 50px) !important;}
.mt-1 {margin-top: min(1vw, 10px) !important;}
.mt-2 {margin-top: min(2vw, 20px) !important;}
.mt-3 {margin-top: min(3vw, 30px) !important;}
.mt-4 {margin-top: min(4vw, 40px) !important;}
.mt-5 {margin-top: min(5vw, 50px) !important;}

.fs-5 {font-size: min(5vw, 50px);}
.fs-4 {font-size: min(4vw, 40px);} /* ページタイトル */
.fs-3 {font-size: min(3vw, 30px);} /* セクションタイトル */
.fs-2 {font-size: min(2vw, 20px);} /* 標準サイズ */
.fs-1 {font-size: min(1.4vw, 14px);} /* 小さめ */
@media (max-width: 500px) {
    .fs-5 {font-size: 10vw}
    .fs-4 {font-size: 8vw}
    .fs-3 {font-size: 6vw}
    .fs-2 {font-size: 4vw}
    .fs-1 {font-size: 2.8vw}
}
.fw-b {font-weight: bold;}

.text-center {text-align: center;}
.text-right {text-align: right;}

.transition {transform: rotateY(180deg);}

/*
 * TOPレイアウト
 * ------------------------- */

@media (min-aspect-ratio: 1/1) and (min-width: 901px) {
    .page-home .wrap {position: relative; width: 100vw; height: 100vh; min-height: 50vw;}
    .page-home .tagline {position: absolute; left: 25%; top: 33.33%; width: 25%; height: 33.33%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.5vw;}
    .page-home .tagline-1 {position: relative; left: -1.5vw;}
    .page-home .tagline-3 {position: relative; left: 1.5vw;}
    .page-home .logo {position: absolute; left: 50%; top: 33.33%; width: 25%; height: 33.33%; padding: 4vw;}
    .page-home .logo img {width: 100%; height: 100%; object-fit: contain;}
    .page-home .nav {position: absolute; width: 25%; height: 33.33%;}
    .page-home .nav-1 {left: 0; top: 0;}
    .page-home .nav-2 {left: 50%; top: 0;}
    .page-home .nav-3 {left: 0; top: 66.66%;}
    .page-home .nav-4 {left: 50%; top: 66.66%;}
    .page-home .nav-5 {left: 75%; top: 33.33%;}
    .page-home .nav p {position: absolute; top: 50%; width: 100%; padding: 1vw; transform: translateY(-50%);}
    .page-home .nav i {display: block; margin-bottom: 1vw; text-align: center; font-size: 5vw;}
    .page-home .nav span {display: block; text-align: center; font-size: 3vw;}
    .page-home .nav small {display: block; text-align: center; font-size: 1vw; color: var(--text-white-muted);}
}

@media (max-aspect-ratio: 1/1), (max-width: 900px) {
    .page-home .wrap {position: relative; width: 100vw; height: 100vh; min-height: 133vw;}
    .page-home .tagline {position: absolute; left: 0; top: 0; width: 33.33%; height: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 2.5vw;}
    .page-home .tagline-1 {position: relative; left: -2.5vw;}
    .page-home .tagline-3 {position: relative; left: 2.5vw;}
    .page-home .logo {position: absolute; left: 33.33%; top: 0; width: 33.33%; height: 25%; padding: 2vw;}
    .page-home .logo img {width: 100%; height: 100%; object-fit: contain;}
    .page-home .nav {position: absolute; width: 33.33%; height: 25%;}
    .page-home .nav-1 {left: 66.66%; top: 0;}
    .page-home .nav-2 {left: 33.33%; top: 25%;}
    .page-home .nav-3 {left: 0; top: 50%;}
    .page-home .nav-4 {left: 66.66%; top: 50%;}
    .page-home .nav-5 {left: 33.33%; top: 75%;}
    .page-home .nav p {position: absolute; top: 50%; width: 100%; padding: 1vw; transform: translateY(-50%);}
    .page-home .nav i {display: block; margin-bottom: 1vw; text-align: center; font-size: 5vw;}
    .page-home .nav span {display: block; text-align: center; font-size: 3vw;}
    .page-home .nav small {display: block; text-align: center; font-size: 1vw; color: var(--text-white-muted);}
}

@media (max-width: 500px) {
    .page-home .wrap {position: relative; width: 100vw; height: 100vh; min-height: 215vw;}
    .page-home .tagline {font-size: 3vw;}
    .page-home .tagline-1 {left: -3vw;}
    .page-home .tagline-3 {left: 3vw;}
    .page-home .nav i {display: block; margin-bottom: 1vw; text-align: center; font-size: 7vw;}
    .page-home .nav span {display: block; margin-bottom: 1vw; text-align: center; font-size: 4vw;}
    .page-home .nav small {display: block; text-align: center; font-size: 3vw; color: var(--text-white-muted);}
}

.page-home footer {display: none;}
.nav-secondary {display: none;}

/* 経営理念のインデント */
.mission-tagline .mission-line-1 { display: block; margin-left: 0; }
.mission-tagline .mission-line-2 { display: block; margin-left: 0.56em; }
.mission-tagline .mission-line-3 { display: block; margin-left: 1.12em; }

/* スマホ用：文字が改行しないようにフォントサイズ調整 */
@media (max-width: 500px) {
    div.typography.fs-5.mission-tagline span { 
        display: block;
        white-space: nowrap; 
        font-size: clamp(4px, 8vw, 60px) !important; 
    }
}

/*
 * 下層レイアウト
 * ------------------------- */

.page-development .nav-development {display: block;}
.page-engineering .nav-engineering {display: block;}
.page-products .nav-products {display: block;}
.page-recruitment .nav-recruitment {display: block;}
.page-profile .nav-profile {display: block;}

@media (min-width: 501px) {
    .page-secondary .wrap {position: relative;}
    .page-secondary header {height: 23vw;}
    .page-secondary .tagline {position: absolute; left: 20%; top: 0; width: 80%; height: 3vw; padding: 1vw; line-height: 1vw; font-size: 1vw; display: flex;}
    .page-secondary .logo {position: absolute; left: 0; top: 0; width: 20%; height: 13vw; padding: 4vw;}
    .page-secondary .logo img {width: 100%; height: 100%; object-fit: contain;}

    .page-secondary .nav {position: absolute; width: 20%; height: 10vw;}
    .page-secondary .nav p {position: absolute; top: 50%; width: 100%; transform: translateY(-50%);}
    .page-secondary .nav i {display: block; margin-bottom: 0.5vw; text-align: center; font-size: 2.5vw;}
    .page-secondary .nav span {display: block; text-align: center; font-size: 2vw;}
    .page-secondary .nav small {display: none;}

    .page-development .nav-1 {left: 0; top: 13vw; width: 100%; height: 10vw;}
    .page-development .nav-2 {left: 20%; top: 3vw;}
    .page-development .nav-3 {left: 40%; top: 3vw;}
    .page-development .nav-4 {left: 60%; top: 3vw;}
    .page-development .nav-5 {left: 80%; top: 3vw;}
    .page-development .nav-1 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-development .nav-1 i {position: absolute; left: 2vw; top: 2vw; font-size: 6vw;}
    .page-development .nav-1 span {position: absolute; left: 10vw; top: 2vw; font-size: 3vw;}
    .page-development .nav-1 small {display: block; position: absolute; left: 10vw; top: 6vw; font-size: 1.5vw; color: var(--text-white-muted);}

    .page-engineering .nav-1 {left: 20%; top: 3vw;}
    .page-engineering .nav-2 {left: 0; top: 13vw; width: 100%; height: 10vw;}
    .page-engineering .nav-3 {left: 40%; top: 3vw;}
    .page-engineering .nav-4 {left: 60%; top: 3vw;}
    .page-engineering .nav-5 {left: 80%; top: 3vw;}
    .page-engineering .nav-2 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-engineering .nav-2 i {position: absolute; left: 2vw; top: 2vw; font-size: 6vw;}
    .page-engineering .nav-2 span {position: absolute; left: 10vw; top: 2vw; font-size: 3vw;}
    .page-engineering .nav-2 small {display: block; position: absolute; left: 10vw; top: 6vw; font-size: 1.5vw; color: var(--text-white-muted);}

    .page-products .nav-1 {left: 20%; top: 3vw;}
    .page-products .nav-2 {left: 40%; top: 3vw;}
    .page-products .nav-3 {left: 0; top: 13vw; width: 100%; height: 10vw;}
    .page-products .nav-4 {left: 60%; top: 3vw;}
    .page-products .nav-5 {left: 80%; top: 3vw;}
    .page-products .nav-3 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-products .nav-3 i {position: absolute; left: 2vw; top: 2vw; font-size: 6vw;}
    .page-products .nav-3 span {position: absolute; left: 10vw; top: 2vw; font-size: 3vw;}
    .page-products .nav-3 small {display: block; position: absolute; left: 10vw; top: 6vw; font-size: 1.5vw; color: var(--text-white-muted);}

    .page-recruitment .nav-1 {left: 20%; top: 3vw;}
    .page-recruitment .nav-2 {left: 40%; top: 3vw;}
    .page-recruitment .nav-3 {left: 60%; top: 3vw;}
    .page-recruitment .nav-4 {left: 0; top: 13vw; width: 100%; height: 10vw;}
    .page-recruitment .nav-5 {left: 80%; top: 3vw;}
    .page-recruitment .nav-4 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-recruitment .nav-4 i {position: absolute; left: 2vw; top: 2vw; font-size: 6vw;}
    .page-recruitment .nav-4 span {position: absolute; left: 10vw; top: 2vw; font-size: 3vw;}
    .page-recruitment .nav-4 small {display: block; position: absolute; left: 10vw; top: 6vw; font-size: 1.5vw; color: var(--text-white-muted);}

    .page-profile .nav-1 {left: 20%; top: 3vw;}
    .page-profile .nav-2 {left: 40%; top: 3vw;}
    .page-profile .nav-3 {left: 60%; top: 3vw;}
    .page-profile .nav-4 {left: 80%; top: 3vw;}
    .page-profile .nav-5 {left: 0; top: 13vw; width: 100%; height: 10vw;}
    .page-profile .nav-5 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-profile .nav-5 i {position: absolute; left: 2vw; top: 2vw; font-size: 6vw;}
    .page-profile .nav-5 span {position: absolute; left: 10vw; top: 2vw; font-size: 3vw;}
    .page-profile .nav-5 small {display: block; position: absolute; left: 10vw; top: 6vw; font-size: 1.5vw; color: var(--text-white-muted);}

    .nav-secondary-toggle {display: none;}
    .nav-secondary-state {display: none;}
    .nav-secondary-list {display: flex; position: absolute; right: 1vw; top: 14vw; width: 60%; height: 8vw; flex-wrap: wrap; justify-content: flex-end; align-items: center;}
    .nav-secondary-list a {display: block; height: 3vw; margin: 0 0.5vw; padding: 0 2vw; line-height: 3vw; background: var(--bg-colors-white); border-radius: 1.5vw; text-decoration: none; font-weight: bold;}

    .page-secondary footer {margin-top: 5vw;}
    .footer-nav {display: block; padding: 2vw; text-decoration: none; font-size: 2vw;}
    .footer-nav i {width: 4vw;}
    .copyright {padding: 3vw; text-align: center; line-height: 3vw; background: var(--primary-ad5); color: var(--text-white); font-size: 2vw;}
    .copyright span {display: block;}
}

@media (max-width: 500px) {
    .page-secondary .wrap {position: relative;}
    .page-secondary header {min-height: 45vw;}
    .page-secondary .tagline {position: absolute; left: 32%; top: 0; width: 68%; height: 13vw; padding-left: 2%; line-height: 13vw; text-align: center; font-size: 3vw; display: flex; justify-content: center;}
    .page-secondary .tagline .tagline-1 {font-size: clamp(3.6px, 2.8vw, 32px);}
    .page-secondary .tagline .tagline-2 {font-size: clamp(3.6px, 2.8vw, 32px);}
    .page-secondary .tagline .tagline-3 {font-size: clamp(3.6px, 2.8vw, 32px);}
    .page-secondary .logo {position: absolute; left: 0; top: 0; width: 32%; height: 13vw; padding: 4vw;}
    .page-secondary .logo img {width: 100%; height: 100%; object-fit: contain;}

    .page-secondary .nav {position: absolute; width: 25%; height: 12vw;}
    .page-secondary .nav p {position: absolute; top: 50%; width: 100%; transform: translateY(-50%);}
    .page-secondary .nav i {display: block; text-align: center; font-size: 6vw;}
    .page-secondary .nav span {display: none;}
    .page-secondary .nav small {display: none;}

    .page-development .nav-1 {left: 0; top: 25vw; width: 100%; height: 20vw;}
    .page-development .nav-2 {left: 0; top: 13vw;}
    .page-development .nav-3 {left: 25%; top: 13vw;}
    .page-development .nav-4 {left: 50%; top: 13vw;}
    .page-development .nav-5 {left: 75%; top: 13vw;}
    .page-development .nav-1 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-development .nav-1 i {position: absolute; left: 5vw; top: 5vw; font-size: 10vw;}
    .page-development .nav-1 span {display: block; position: absolute; left: 20vw; top: 5vw; font-size: 4vw;}
    .page-development .nav-1 small {display: block; position: absolute; left: 20vw; top: 10vw; font-size: 4vw; color: var(--text-white-muted);}

    .page-engineering .nav-2 {left: 0; top: 25vw; width: 100%; height: 20vw;}
    .page-engineering .nav-1 {left: 0; top: 13vw;}
    .page-engineering .nav-3 {left: 25%; top: 13vw;}
    .page-engineering .nav-4 {left: 50%; top: 13vw;}
    .page-engineering .nav-5 {left: 75%; top: 13vw;}
    .page-engineering .nav-2 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-engineering .nav-2 i {position: absolute; left: 5vw; top: 5vw; font-size: 10vw;}
    .page-engineering .nav-2 span {display: block; position: absolute; left: 20vw; top: 5vw; font-size: 4vw;}
    .page-engineering .nav-2 small {display: block; position: absolute; left: 20vw; top: 10vw; font-size: 4vw; color: var(--text-white-muted);}

    .page-products .nav-3 {left: 0; top: 25vw; width: 100%; height: 20vw;}
    .page-products .nav-1 {left: 0; top: 13vw;}
    .page-products .nav-2 {left: 25%; top: 13vw;}
    .page-products .nav-4 {left: 50%; top: 13vw;}
    .page-products .nav-5 {left: 75%; top: 13vw;}
    .page-products .nav-3 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-products .nav-3 i {position: absolute; left: 5vw; top: 5vw; font-size: 10vw;}
    .page-products .nav-3 span {display: block; position: absolute; left: 20vw; top: 5vw; font-size: 4vw;}
    .page-products .nav-3 small {display: block; position: absolute; left: 20vw; top: 10vw; font-size: 4vw; color: var(--text-white-muted);}

    .page-recruitment .nav-4 {left: 0; top: 25vw; width: 100%; height: 20vw;}
    .page-recruitment .nav-1 {left: 0; top: 13vw;}
    .page-recruitment .nav-2 {left: 25%; top: 13vw;}
    .page-recruitment .nav-3 {left: 50%; top: 13vw;}
    .page-recruitment .nav-5 {left: 75%; top: 13vw;}
    .page-recruitment .nav-4 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-recruitment .nav-4 i {position: absolute; left: 5vw; top: 5vw; font-size: 10vw;}
    .page-recruitment .nav-4 span {display: block; position: absolute; left: 20vw; top: 5vw; font-size: 4vw;}
    .page-recruitment .nav-4 small {display: block; position: absolute; left: 20vw; top: 10vw; font-size: 4vw; color: var(--text-white-muted);}

    .page-profile .nav-5 {left: 0; top: 25vw; width: 100%; height: 20vw;}
    .page-profile .nav-1 {left: 0; top: 13vw;}
    .page-profile .nav-2 {left: 25%; top: 13vw;}
    .page-profile .nav-3 {left: 50%; top: 13vw;}
    .page-profile .nav-4 {left: 75%; top: 13vw;}
    .page-profile .nav-5 p {position: absolute; left: 0; top: 0; width: 100%;}
    .page-profile .nav-5 i {position: absolute; left: 5vw; top: 5vw; font-size: 10vw;}
    .page-profile .nav-5 span {display: block; position: absolute; left: 20vw; top: 5vw; font-size: 4vw;}
    .page-profile .nav-5 small {display: block; position: absolute; left: 20vw; top: 10vw; font-size: 4vw; color: var(--text-white-muted);}

    .nav-secondary-toggle {display: block; position: absolute; right: 2vw; top: 30vw; width: 20vw; height: 10vw; text-align: center; line-height: 10vw; background: var(--bg-colors-white);}
    .nav-secondary-state {display: none;}
    .nav-secondary-list {display: none; position: relative; left: 100vw; top: 45vw; margin-bottom: 45vw; transition: left 1s;}
    .nav-secondary-list a {display: block; padding: 3vw 4vw; background: var(--secondary-ad5); color: var(--text-white); border-bottom: 1px solid var(--bg-colors-white); text-decoration: none;}
    .nav-secondary-state:checked + .nav-secondary-list {display: block; left: 0;}

    .page-secondary footer {margin-top: 10vw;}
    .footer-nav {display: block; padding: 4vw; text-decoration: none; font-size: 4vw;}
    .footer-nav i {width: 8vw;}
    .copyright {padding: 6vw; text-align: center; line-height: 6vw; background: var(--primary-ad5); color: var(--text-white); font-size: 4vw;}
    .copyright span {display: block;}
}


/*
 * TOPコンテンツ
 * ------------------------- */

@media (min-aspect-ratio: 1/1) and (min-width: 901px) {
    .content-home {position: absolute; width: 25%; height: 33.33%;}
    .content-home-1 {left: 25%; top: 0;}
    .content-home-2 {left: 75%; top: 0;}
    .content-home-3 {left: 0; top: 33.33%;}
    .content-home-4 {left: 25%; top: 66.66%;}
    .content-home-5 {left: 75%; top: 66.66%;}
    .content-home-inner {position: absolute; top: 50%; width: 100%; padding: 2vw; transform: translateY(-50%);}
    .content-home-inner h2 {margin-top: 1.5vw; font-size: 1.5vw;}
    .content-home-inner h2:first-child {margin-top: 0;}
    .content-home-inner p {font-size: 1vw;}
}

@media (max-aspect-ratio: 1/1), (max-width: 900px) {
    .content-home {position: absolute; width: 33.33%; height: 25%;}
    .content-home-1 {left: 66.66%; top: 25%;}
    .content-home-2 {left: 0; top: 25%;}
    .content-home-3 {left: 33.33%; top: 50%;}
    .content-home-4 {left: 66.66%; top: 75%;}
    .content-home-5 {left: 0; top: 75%;}
    .content-home-inner {position: absolute; top: 50%; width: 100%; padding: 2vw; transform: translateY(-50%);}
    .content-home-inner h2 {margin-top: 2.5vw; font-size: 2.5vw;}
    .content-home-inner h2:first-child {margin-top: 0;}
    .content-home-inner p {font-size: 1.5vw;}
}

@media (max-width: 500px) {
    .content-home-inner h2 {margin-top: 2vw; font-size: 3.5vw; line-height: 1.25;}
    .content-home-inner h2:first-child {margin-top: 0;}
    .content-home-inner p {font-size: 3vw; line-height: 1.25;}
}

/*
 * 下層コンテンツ (共通)
 * ------------------------- */

.content-development .fc-primary,
.content-development .page-title,
.content-development .section-title,
.content-development .table-col-head,
.content-development strong {color: var(--colors-green);}
.content-engineering .fc-primary,
.content-engineering .page-title,
.content-engineering .section-title,
.content-engineering .table-col-head,
.content-engineering strong {color: var(--colors-blue);}
.content-products .fc-primary,
.content-products .page-title,
.content-products .section-title,
.content-products .table-col-head,
.content-products strong {color: var(--colors-purple);}
.content-recruitment .fc-primary,
.content-recruitment .page-title,
.content-recruitment .section-title,
.content-recruitment .table-col-head,
.content-recruitment strong {color: var(--colors-pink);}
.content-profile .fc-primary,
.content-profile .page-title,
.content-profile .section-title,
.content-profile .table-col-head,
.content-profile strong {color: var(--colors-coral);}

/* バナー */
.banner {display: block; position: relative; padding: min(1.5vw, 15px); padding-left: min(3vw, 30px); text-decoration: none; color: var(--text-white);}
.banner::before {content:""; display: block; position: absolute; top: 10px; left: 10px; width: 2px; height: calc(100% - 20px); background: var(--bg-colors-white);}
.banner::after {content:"\f04e"; display: block; position: absolute; bottom: 10px; right: 10px; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.banner-title {font-weight: bold; font-size: min(2.5vw, 25px); color: var(--text-white-strong);}
.banner-decorate {font-size: min(1.5vw, 15px); line-height: min(2.5vw, 25px); color: var(--text-white-muted);}
.content-development .banner {background-color: var(--colors-green);}
.content-engineering .banner {background-color: var(--colors-blue);}
.content-products .banner {background-color: var(--colors-purple);}
.content-recruitment .banner {background-color: var(--colors-pink);}
.content-profile .banner {background-color: var(--colors-coral);}
@media (max-width: 500px) {
    .banner {padding-left: 6vw;}
    .banner-title {font-size: 5vw;}
    .banner-decorate {font-size: 3vw; line-height: 5vw;}
}

/* ボタン */
.button {display: inline-block; position: relative; padding: min(1.5vw, 15px) min(6vw, 60px) min(1.5vw, 15px) min(4vw, 40px); text-decoration: none; font-weight: bold; font-size: min(2.5vw, 25px); color: var(--text-white-strong);}
.button::after {content:"\f054"; position: absolute; right: 10px; top: 50%; height: 30px; margin-top: -15px; line-height: 30px !important; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.button-decorate {font-size: min(1.5vw, 15px); line-height: min(2.5vw, 25px); color: var(--text-white-muted);}
.content-development .button {background-color: var(--colors-green);}
.content-engineering .button {background-color: var(--colors-blue);}
.content-products .button {background-color: var(--colors-purple);}
.content-recruitment .button {background-color: var(--colors-pink);}
.content-profile .button {background-color: var(--colors-coral);}
@media (max-width: 500px) {
    .button {padding: 3vw 12vw 3vw 8vw; font-size: 5vw;}
    .button-decorate {font-size: 3vw; line-height: 5vw;}
}

/* カラム組 */
.cols {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; margin-left: -10px; margin-right: -10px;}
.col-8 {flex-basis: 66.66%; padding-left: 10px; padding-right: 10px;}
.col-6 {flex-basis: 50%; padding-left: 10px; padding-right: 10px;}
.col-4 {flex-basis: 33.33%; padding-left: 10px; padding-right: 10px;}
.col-3 {flex-basis: 25%; padding-left: 10px; padding-right: 10px;}
@media (max-width: 500px) {
    .cols {margin-left: 0; margin-right: 0;}
    .col-8,
    .col-6,
    .col-4,
    .col-3 {flex-basis: 100%; margin-bottom: 5vw; padding-left: 0; padding-right: 0;}
    .col-8:last-child,
    .col-6:last-child,
    .col-4:last-child,
    .col-3:last-child {margin-bottom: 0;}
}

/* 画像 */
figure.bordered {border: 1px solid var(--bg-colors-border);}

/* タイポグラフィ */
.typography {padding: min(2vw, 20px) min(3vw, 30px); background: var(--bg-gradient-typography)}

/* カード */
.card {padding: min(2vw, 20px); border: 1px solid var(--bg-colors-border); border-left: 2px solid var(--bg-colors-border); border-radius: 0 0 min(2vw, 20px) 0;}
.card-title {margin-bottom: min(2vw, 20px); font-size: min(2.5vw, 25px);}
@media (max-width: 500px) {
    .card-title {font-size: 5vw;}
}

@media (min-width: 1001px) {
    .content-secondary {width: 1000px; margin: 0 auto; padding: 40px; font-size: 20px; min-height: 100vh;}
    .page-title {margin: 0 -10px 30px; padding: 0 10px 10px; font-size: 40px; border-bottom: 2px solid var(--bg-colors-border);}
    .section-title {margin-bottom: 20px; font-size: 30px;}
    .block-title {margin-top: 20px; margin-bottom: 20px; font-size: 25px;}
    .section-plain {margin-bottom: 80px;}
    .section-plain p {margin-bottom: 20px;}
    .section-plain p:last-child {margin-bottom: 0;}

    .table {margin-bottom: 40px; border-top: 1px solid var(--bg-colors-border);}
    .table-row {display: flex; border-bottom: 1px solid var(--bg-colors-border);}
    .table-col,
    .table-col-head {flex-basis: 100px; padding: 10px; flex-grow: 1;}
    .table-col-1 {flex-grow: 1;}
    .table-col-2 {flex-grow: 2;}
    .table-col-3 {flex-grow: 3;}
    .table-col-4 {flex-grow: 4;}
}

@media (min-width: 501px) and (max-width: 1000px) {
    .content-secondary {padding: 4vw; font-size: 2vw; min-height: 100vh;}
    .page-title {margin: 0 -1vw 3vw; padding: 0 1vw 1vw; font-size: 4vw; border-bottom: 2px solid var(--bg-colors-border);}
    .section-title {margin-bottom: 2vw; font-size: 3vw;}
    .block-title {margin-top: 2vw; margin-bottom: 2vw; font-size: 2.5vw;}
    .block-title:first-child {margin-top: 0;}
    .section-plain {margin-bottom: 8vw;}
    .section-plain p {margin-bottom: 2vw;}
    .section-plain p:last-child {margin-bottom: 0;}

    .table {margin-bottom: 4vw;}
    .table-row {display: flex;}
    .table-col,
    .table-col-head {flex-basis: 10vw; padding: 1vw; flex-grow: 1;}
    .table-col-1 {flex-grow: 1;}
    .table-col-2 {flex-grow: 2;}
    .table-col-3 {flex-grow: 3;}
    .table-col-4 {flex-grow: 4;}
}

@media (max-width: 500px) {
    .content-secondary {padding: 5vw; font-size: 4vw; min-height: 100vh;}
    .page-title {margin: 0 -1vw 6vw; padding: 0 1vw 2vw; font-size: 8vw; border-bottom: 2px solid var(--bg-colors-border);}
    .section-title {margin-bottom: 3vw; font-size: 6vw;}
    .block-title {margin-top: 3vw; margin-bottom: 3vw; font-size: 5vw;}
    .block-title:first-child {margin-top: 0;}
    .section-plain {margin-bottom: 8vw;}
    .section-plain p {margin-bottom: 4vw;}
    .section-plain p:last-child {margin-bottom: 0;}

    .table-row {margin-bottom: 2vw;}
}

/*
 * 下層コンテンツ (XXXX)
 * ------------------------- */

 /*
 * 下層コンテンツ (XXXX)
 * ------------------------- */