@charset "utf-8";

/* ==========================================================================
   Staff 2 - Flexible Layout
   ========================================================================== */

/* Variables */
:root {
  --staff-green: #90C31F;
  /* bitter-lemon from original? or fun-green equivalent */
  --staff-text-black: #000000;
  --staff-bg-light: #F0F0F0;
}

/* Base Styles */
body {
  margin: 0;
  padding: 0;
  font-family: "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  background-color: var(--staff-bg-light);
  color: var(--staff-text-black);
}

.staff2-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 5%;
  box-sizing: border-box;
}


/* Header Container Wrapper (Ported from .view in staff.css) */
.staff-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 53px;
  background-color: #ffffff;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  /* Optional: slight shadow for visibility */
}

/* Footer Container Wrapper (Matches staff.html visual style exactly) */
.staff-footer-original-wrapper {
  background-color: #008239;
  /* fun-green */
  height: 161px;
  width: 100%;
  margin-top: 60px;
  position: relative;
  overflow: hidden;
  /* Ensure content stays within 161px */
  /* No default font settings here to match staff.html's lack of them */
}

/* Ported from globals.css for Footer Elements */
/* Note: Original CSS uses fixed calc() based on 1920px width. 
   We need to adapt this or use the same calc if the parent is treated as full width. 
   Since staff2.html is responsive, we might need media queries or scaling. 
   However, user wants "EXACT" match to staff.html PC view. 
   I will use the exact calc values from globals.css but ensure they reference the container width properly.
*/
/* Note: Removing manual font overrides to match staff.html which relies on defaults/missing classes on PC */

.staff-footer-original-wrapper .image {
  height: 68px;
  left: calc(21.47% - 52px);
  object-fit: cover;
  position: absolute;
  top: calc(39.89% - 27px);
  width: 242px;
}

.staff-footer-original-wrapper .x2-3-15 {
  height: 63px;
  left: calc(41.32% - 167px);
  letter-spacing: 0;
  line-height: 1.6;
  /* Adjusted for readability, original was 10.6px line-height which is very tight/weird for text? globals.css says 10.6px. Let's trust logic or visual? 10.6px might be error in Anima. I'll stick to visual default or 1.6em. globals.css line 167 says 10.6px. This is likely Anima export artifact. */
  position: absolute;
  top: calc(48.57% - 31px);
  white-space: nowrap;
  width: 405px;
  color: #ffffff;
  /* Removed font size/family overrides */
}

.staff-footer-original-wrapper .copyright {
  bottom: calc(39.76% - 8px);
  height: 21px;
  letter-spacing: 0;
  line-height: 21.6px;
  position: absolute;
  right: calc(20.70% - 40px);
  white-space: nowrap;
  width: 192px;
  color: #ffffff;
  /* Removed font size/family overrides */
}

.staff-footer-original-wrapper .text-165 {
  cursor: pointer;
  height: 21px;
  letter-spacing: 0;
  line-height: 21.6px;
  position: absolute;
  right: calc(20.22% - 31px);
  top: calc(41.98% - 9px);
  white-space: nowrap;
  width: 151px;
  color: #ffffff;
  /* Removed font size/family overrides */
}

/* Staff Member Card */
.staff-member {
  display: flex;
  flex-direction: row;
  /* Default: Image Left, Text Right */
  flex-wrap: nowrap;
  gap: 40px;
  margin-bottom: 100px;
  padding-bottom: 60px;
  border-bottom: 1px dotted #ccc;
  scroll-margin-top: 100px;
}

/* Alternating Layout: Even items (2nd, 4th, etc.) */
.staff-member:nth-child(even) {
  flex-direction: row-reverse;
  /* Image Right, Text Left */
}

.staff-member:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Left Column: Image */
.staff-image-col {
  flex: 0 0 340px;
  /* Fixed width for image column on PC */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.staff-role {
  font-size: 21px;
  color: #009845;
  /* fun-green approx */
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
  width: 100%;
}

.staff-name {
  font-size: 49px;
  /* Matches original */
  color: #009845;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: left;
  width: 100%;
  line-height: 1.2;
}

/* Align text properties for reversed rows if needed, though 'text-align: left' is usually fine */

.staff-photo-wrapper {
  position: relative;
  width: 340px;
  height: 450px;
  /* Adjust based on image aspect ratio */
  /* Background shape simulation */
}

.staff-photo-bg {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 90%;
  background-color: #13b5bf;
  background-image: url('../img/cardboard-texture_200px.png');
  background-repeat: repeat;
  background-blend-mode: multiply;
  /* java (Blue) - Default for Odd items */
  border-radius: 60px;
  z-index: 0;
}

/* Alternating Background Color: Even items get Apple Green */
.staff-member:nth-child(even) .staff-photo-bg {
  background-color: #23ac38;
  background-image: url('../img/cardboard-texture_200px.png');
  background-repeat: repeat;
  background-blend-mode: multiply;
  /* apple (Green) */
}

.staff-photo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

/* Right Column: Details */
.staff-details-col {
  flex: 1;
  padding-top: 40px;
  /* Align with top of image approximately */
}

.staff-info-block {
  margin-bottom: 25px;
}

.staff-dl {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  border-bottom: 2px solid #009845;
  /* Match green name color */
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.staff-dl:first-child {
  border-top: none;
}

.staff-dt {
  flex: 0 0 200px;
  /* Fixed label width */
  font-weight: bold;
  font-size: 19px;
  display: flex;
  align-items: center;
}

/* Icon before DT */
.staff-dt::before {
  display: none;
}

.staff-dd {
  flex: 1;
  font-size: 19px;
  line-height: 1.6;
  padding-left: 20px;
  min-width: 0;
  /* Prevents flex item from overflowing */
  word-wrap: break-word;
  /* Ensure long words break */
}

.staff-dd.company-name {
  font-weight: normal;
}

.staff-dd.message {
  white-space: pre-wrap;
  /* Preserve line breaks if any */
}


/* ==========================================================================
   Responsive (SP)
   ========================================================================== */
@media screen and (max-width: 768px) {
  .staff2-container {
    padding: 20px;
    width: 100%;
  }


  .staff-member,
  .staff-member:nth-child(even) {
    /* Overlay specificity to enforce column layout on mobile */
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .staff-image-col {
    flex: 0 0 auto;
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .staff-role {
    text-align: center;
    font-size: 18px;
  }

  .staff-name {
    text-align: center;
    font-size: 32px;
    margin-bottom: 30px;
  }

  .staff-photo-wrapper {
    width: 280px;
    height: 350px;
    margin: 0 auto;
  }

  .staff-details-col {
    width: 100%;
    padding-top: 0;
  }

  .staff-dl {
    flex-direction: column;
    padding-bottom: 20px;
  }

  .staff-dt {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 10px;
  }

  .staff-dd {
    padding-left: 45px;
    /* Indent content under label icon */
    width: 100%;
    box-sizing: border-box;
  }
}