/* About page specific styles */

/* Logo block sizing */
#header p img { width: 170px; height: 60px; }
/* Language button size fix */
#header .langbt img { width: 131px; height: 20px; }

/* tipi_head styling for about page */
.tipi_head { 
	margin: 0 auto; 
	width: 959px; /* Match gmenu width */
	height: 20px; 
	border-bottom: 3px solid #c00000 !important; /* Add red line below tipi_head */
	position: relative;
	z-index: 10;
	background: white; /* Ensure background is visible */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* About page side menu styles - recreated with CSS */
#container #subMenu { width: 180px; }
#container #subMenu .menu_about {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Page title image (left-aligned) */
.pagetitle { 
    background-image: url(../images/title_main.jpg);
}
.pagetitle h1 { 
    text-indent: -9999px; 
    overflow: hidden; 
    height: 36px; 
    line-height: 36px;
}

/* Section title image on each About subpage */
#container #main .section-title img {
    display: block;
    width: 767px;
    height: 53px;
}


/* Founder / CEO メッセージレイアウト（写真右上＋本文回り込み） */
#container #main .founder-layout {
    position: relative;
    overflow: hidden; /* floatを内包 */
}

#container #main .founder-layout::after {
    content: "";
    display: block;
    clear: both;
}

#container #main .founder-photo {
    float: right;
	max-width: 350px;
    margin: 0 0 20px 24px;
}

/* CEOページ専用の写真サイズ調整 */
#container #main .ceo-photo {
	max-width: 220px;
}

#container #main .founder-photo img {
    display: block;
    width: 100%;
    height: auto;
}

#container #main .founder-text,
#container #main .founder-continuation {
    margin-top: 0;
}

@media (max-width: 900px) {
  #container #main .founder-photo {
      float: none;
      margin: 0 auto 24px auto;
      max-width: 60%;
  }
}



/* Brand logo sizing on About pages */
#container #main img.brand-logo {
    max-width: 200px;  /* was 240px */
    width: 50%;
    height: auto;
}

#container #subMenu .menu_about li {
	width: 180px;
	margin-bottom: 0;
}
#container #subMenu .menu_about li:last-child a { border-bottom: none; }

#container #subMenu .menu_about li a {
    height: 50px; /* part height */
    width: 180px;  /* part width */
    display: block;
    position: relative;
    text-decoration: none;
    color: #333333;
    font-size: 12px;
    line-height: 1.2;
    overflow: hidden;
    padding: 0;
    transition: all 0.3s ease;
    
    background: white;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: none;
}
#container #subMenu .menu_about li a:hover {
    background: white;
    box-shadow: none;
}

/* Active state styling */
#container #subMenu .menu_about li.missionOn a,
#container #subMenu .menu_about li.visionOn a,
#container #subMenu .menu_about li.founderOn a,
#container #subMenu .menu_about li.ceoOn a,
#container #subMenu .menu_about li.boardOn a,
#container #subMenu .menu_about li.quantitativeOn a,
#container #subMenu .menu_about li.qualityOn a,
#container #subMenu .menu_about li.companyOn a,
#container #subMenu .menu_about li.rdfacilitiesOn a {
    background: white;
    box-shadow: none;
}

/* Text switching effect - English to Japanese on hover */
#container #subMenu .menu_about li a .menu-text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1px 0 15px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9);
}

/* Accent line before text */
#container #subMenu .menu_about li a .menu-text::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #c00000;
    border-radius: 2px;
}

/* English text - visible by default */
#container #subMenu .menu_about li a .english {
    font-family: "chentry ゴシック", sans-serif;
    font-size: 14px;
    color: #1a1a1a; /* CMYK(0,0,0,90) converted to RGB */
    text-align: left;
    font-weight: bold;
    margin-right: 10px;
    display: inline-block;
}

/* Japanese text - visible by default */
#container #subMenu .menu_about li a .japanese {
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノマルゴシ", "Hiragino Maru Gothic", sans-serif;
    font-size: 14px;
    color: #c00000;
    text-align: left;
    font-weight: bold;
    display: inline-block;
}

/* Right triangle for Japanese text */
#container #subMenu .menu_about li a .japanese::after {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid #c00000;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}


/* Hover toggle: English default, Japanese on hover (align with access/topics) */
#container #subMenu .menu_about li a .menu-text {
    position: relative;
    height: 100%;
    z-index: 1;
}
#container #subMenu .menu_about li a .english,
#container #subMenu .menu_about li a .japanese {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding-left: 18px; /* red line (10px) + width (4px) + gap (4px) */
    text-indent: 0 !important;
}
#container #subMenu .menu_about li a .english {
    opacity: 1;
    transition: opacity 0.25s ease;
}
#container #subMenu .menu_about li a .japanese {
    opacity: 0;
    transition: opacity 0.25s ease;
}
#container #subMenu .menu_about li a:hover .english { opacity: 0; }
#container #subMenu .menu_about li a:hover .japanese { opacity: 1; }


/* Keep Japanese visible on the active (selected) submenu item */
#container #subMenu .menu_about li.missionOn a .english,
#container #subMenu .menu_about li.visionOn a .english,
#container #subMenu .menu_about li.founderOn a .english,
#container #subMenu .menu_about li.ceoOn a .english,
#container #subMenu .menu_about li.boardOn a .english,
#container #subMenu .menu_about li.quantitativeOn a .english,
#container #subMenu .menu_about li.qualityOn a .english,
#container #subMenu .menu_about li.companyOn a .english,
#container #subMenu .menu_about li.rdfacilitiesOn a .english { opacity: 0; }

#container #subMenu .menu_about li.missionOn a .japanese,
#container #subMenu .menu_about li.visionOn a .japanese,
#container #subMenu .menu_about li.founderOn a .japanese,
#container #subMenu .menu_about li.ceoOn a .japanese,
#container #subMenu .menu_about li.boardOn a .japanese,
#container #subMenu .menu_about li.quantitativeOn a .japanese,
#container #subMenu .menu_about li.qualityOn a .japanese,
#container #subMenu .menu_about li.companyOn a .japanese,
#container #subMenu .menu_about li.rdfacilitiesOn a .japanese { opacity: 1; }

/* Company profile table */
.company-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2em;
    /* Use default typography (match body text) */
    font-size: 1.2rem;
    line-height: 1.8;
    color: #333;
}
.company-table th,
.company-table td {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px 12px;
    vertical-align: top;
}
.company-table th {
    width: 26%;
    background: #f7f7f7;
    color: rgb(192, 0, 0); /* keep headings red */
    text-align: left;
    white-space: nowrap;
}
.company-table td a { color: #0066cc; text-decoration: underline; }


/* R&D Facilities page layout */
#container #main .facilities-lead { font-size: 1.1rem; line-height: 1.9; font-weight: 600; margin: 0; }
#container #main .gap-3lines { height: 3em; }
#container #main .facilities-heading {
  font-size: 1.4rem;     /* keep only size */
  margin: 3em 0 12px;    /* spacing unchanged */
  text-indent: 0;
  background: none;
  height: auto;          /* ensure natural height */
  line-height: 1.8;      /* match default paragraph line-height */
  color: #333;           /* match default paragraph color */
}
/* Color only the leading square bullet "■" in the heading */
#container #main .facilities-heading::first-letter { color: rgb(192, 0, 0); }
/* remove special first-letter color to match defaults */

/* Cancel the generic top spacing on this page's content block */
#container #main .section-title + .facilities-main { margin-top: 0; }

#container #main .two-col-images { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 0; }
#container #main .two-col-images img { flex: 1 1 48%; max-width: calc(50% - 8px); height: auto; display: block; }

#container #main .lab-layout { display: flex; gap: 24px; align-items: flex-start; }
#container #main .lab-photos { flex: 1 1 58%; }
#container #main .lab-photos img { width: 100%; height: auto; display: block; margin: 0 0 12px; }
#container #main .lab-features { flex: 1 1 42%; display: grid; grid-template-columns: 1fr; gap: 12px; }
#container #main .lab-features .feature { background: none; border: 0; padding: 12px 14px; }
#container #main .lab-features .feature h3 { margin: 0 0 6px; font-size: 1rem; color: #c00000; }
#container #main .lab-features .feature ul { margin: 0; padding: 0 0 0 1.2em; }
#container #main .lab-features .feature li { margin: 0.2em 0; }

/* Inherit default typography for R&D feature blocks except red headings */
#container #main .lab-features .feature { font-size: 1.2rem; line-height: 1.8; color: #333; }
#container #main .lab-features .feature ul { font-size: 1.2rem; line-height: 1.8; color: #333; }
#container #main .lab-features .feature li { font-size: 1.2rem; line-height: 1.8; color: #333; }
#container #main .lab-features .feature h3 { color: #c00000; }

/* Map hover effect - handled by JavaScript */

@media (max-width: 900px) {
  #container #main .two-col-images img { max-width: 100%; flex-basis: 100%; }
  #container #main .lab-layout { flex-direction: column; }
  #container #main .lab-photos, #container #main .lab-features { flex-basis: auto; }
}