@charset "utf-8";
/* ================================================
   MOTOROiD Page Styles - New Design v3
   ================================================ */

/* ================================================
   Main Visual Section
   ================================================ */
.motoroid-mainvisual {
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
}

.motoroid-mainvisual .mainvisual {
  display: block;
  width: 100%;
}

.motoroid-mainvisual .mainvisual img {
  width: 100%;
  height: auto;
  display: block;
}

/* Title Overlay - Text-width black box at bottom left */
.motoroid-mainvisual-overlay {
  position: absolute;
  bottom: 5%;
  left: 0;
  width: fit-content;
  background-color: #121212;
  padding: 1.8vw 3vw;
  z-index: 2;
}

.motoroid-mainvisual-title {
  /* font-family: "Zen Kaku Gothic New", sans-serif; */
  font-weight: 700;
  color: #a3a9ae;
  margin-bottom: 0.5vw;
  /* letter-spacing: 0.05em; */
  margin-left: -0.5rem;
}

/* 大きいサイズ: 45.13pt相当 */
.motoroid-mainvisual-title .title-large {
  font-size: clamp(24px, 3.5vw, 50px);
  color: #fff;
}

/* 小さいサイズ（白）: 36.1pt相当 - 「への」 */
.motoroid-mainvisual-title .title-small-white {
  font-size: clamp(20px, 2.8vw, 40px);
  color: #fff;
}

/* 小さいサイズ（グレー）: 36.1pt相当 - 「をともに進む」 */
.motoroid-mainvisual-title .title-small {
  font-size: clamp(20px, 2.8vw, 40px);
  color: #a3a9ae;
}

/* サブタイトル: 23.47pt相当 (約52%) */
.motoroid-mainvisual-subtitle {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(14px, 1.8vw, 26px);
  font-weight: 500;
  color: #caccd0;
  letter-spacing: 0.05em;
}

/* Developer Information - Semi-transparent black overlay on image */
.motoroid-developers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.motoroid-developers .developer {
  position: absolute;
  text-align: left;
  background-color: rgba(0, 0, 0, 0.7);
  background-color: rgba(0, 0, 0, 0.7);
  /* padding: 1vw 1.2vw; */
  padding: 0vw 0.3vw;
}

/* 佐野 貴透 - 左 */
.motoroid-developers .developer:nth-child(1) {
  left: 4%;
  top: 59%;
}

/* 寺田 圭佑 - 中央 */
.motoroid-developers .developer:nth-child(2) {
  left: 54.2%;
  transform: translateX(-50%);
  top: 60.5%;
}

/* 篠原 功次 - 右 */
.motoroid-developers .developer:nth-child(3) {
  right: 7.5%;
  top: 57.6%;
}

.motoroid-developers .developer-name {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(10px, 1.4vw, 16px);
  font-weight: 700;
  color: #000;
  margin-top: 0.3vw;
  /* margin-bottom: 0.3vw; */
  /* letter-spacing: 0.05em; */
}
#motoroid .motoroid-developers .developer-name {
  line-height: 1;
}

.motoroid-developers .developer-title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(8px, 1.0vw, 12px);
  font-weight: 400;
  color: #000;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
#motoroid .motoroid-developers .developer-title {
  line-height: 1.5;
}

/* ================================================
   Lead Section (Separate Block)
   ================================================ */
.motoroid-lead {
  padding: 16px 30px;
  background-color: #7e858c;
}

.motoroid-lead-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.motoroid-lead p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.04em;
}
#motoroid .motoroid-lead p {
  line-height: 1.5;
}

.motoroid-lead p:last-child {
  margin-bottom: 0;
}

/* ================================================
   Background & Wrapper
   ================================================ */
.motoroid-bg {
  background-color: #f5f5f5;
}

.motoroid-wrap {
  max-width: 1280px;
  margin: auto;
  padding: 0 30px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
}

/* ================================================
   Section Styles - Two Column Layout with Grid System
   ================================================ */
.motoroid-section {
  display: flex;
  padding: 20px 0;
  align-items: flex-start;
}

.motoroid-section:first-child {
  padding-top: 0;
}

/* Section 2: Header Right, Content Left (using order instead of row-reverse) */
#motoroid .section-02 .section-header.rwd-grid-item.pc-grid4of12 {
  order: 2;
  margin-left: 2%;
}

#motoroid .section-02 .interview-list.rwd-grid-item.pc-grid8of12 {
  order: 1;
  margin-left: 0;
}

/* ================================================
   Section Header - Vertical Layout
   ================================================ */
.section-header {
  display: flex;
  flex-direction: column;
}

.section-title {
  display: block;
  margin: 0;
  background-color: #343434;
}

.section-title img {
  display: block;
  width: 100%;
  height: auto;
}

/* Section Header Image */
.section-header-image {
  width: 100%;
}

.section-header-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Grid Decoration - Two Square Design */
.section-header-grid {
  width: 100%;
  aspect-ratio: 2 / 1;
  pointer-events: none;
}

/* Hide Section 03 Grid */
.section-03 .section-header-grid {
  display: none;
}

.grid-decoration {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #f6f6f6 50%, #e7e8e9 50%);
}

/* Section 2: Different colors */
.section-02 .grid-decoration {
  background: linear-gradient(to right, #f6f6f6 50%, #7e858c 50%);
}

/* Section 3: Different colors */
.section-03 .grid-decoration {
  background: linear-gradient(to right, #fff 50%, #f6f6f6 50%);
}

/* ================================================
   Interview List Styles
   ================================================ */
#motoroid .interview-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 0;
}

#motoroid .interview-item {
  position: relative;
}

#motoroid .interview-item:first-child {
  margin-top: 48px;
}

/* Question */
#motoroid .interview-question-wrapper {
  margin-bottom: 24px;
}

#motoroid .interview-question {
  display: inline;
  line-height: 2.6;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 6px 14px 8px 12px;
  background-color: #121212;
  color: #fbfbfb;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.03em;
}

/* Answer */
#motoroid .interview-answer {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #3b3b3b;
  line-height: 1.7;
  letter-spacing: 0.04em;
  margin: 0 0 1.5em 0;
  padding-left: 12px;
}

#motoroid .interview-answer:last-of-type {
  margin-bottom: 0;
}

.speaker-name {
  font-weight: 700;
  color: #121212;
}

/* ================================================
   Full Width Section (after Section 3)
   ================================================ */
.motoroid-section-fullwidth {
  padding: 0 0 80px;
}

/* MOTOROiD Machines Image - Full Width */
.motoroid-machines-image {
}

.motoroid-machines-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Interview List Full Width */
#motoroid .interview-list-fullwidth {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 0;
  margin: 0 auto;
}

/* ================================================
   MOTOROiD Links Section
   ================================================ */
.motoroid-links-section {
  padding: 0 0 80px;
  text-align: center;
}

.motoroid-links-title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #121212;
  margin-bottom: 28px;
  letter-spacing: 0.05em;
}

.motoroid-banners {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.motoroid-banners .banner-link {
  display: block;
  max-width: 450px;
  width: calc(33.333% - 16px);
  transition: opacity 0.3s ease;
}

.motoroid-banners .banner-link:hover {
  opacity: 0.8;
}

.motoroid-banners .banner-link img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================================
   Content Background
   ================================================ */
#motoroid.main-content {
  background-color: #f5f5f5;
}

/* ================================================
   Responsive Styles (Tablet)
   ================================================ */
@media screen and (max-width: 1024px) {
}

/* ================================================
   Responsive Styles (Mobile Layout - max-width: 767px)
   ================================================ */
@media screen and (max-width: 767px) {
  /* Main Visual - Full width on mobile */
  .motoroid-mainvisual-overlay {
    position: relative;
    bottom: auto;
    width: 100%;
    padding: 16px;
  }

  .motoroid-mainvisual-title {
    margin-bottom: 4px;
  }

  .motoroid-mainvisual-title .title-large {
    font-size: 18px;
  }

  .motoroid-mainvisual-title .title-small-white,
  .motoroid-mainvisual-title .title-small {
    font-size: 14px;
  }

  .motoroid-mainvisual-subtitle {
    font-size: 11px;
  }

  /* Developers - stacked below title on mobile */
  .motoroid-developers {
    position: relative;
    /*width: 80%;*/
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    background-color: #fff;
  }

  .motoroid-developers .developer {
    position: static;
    transform: none;
    background-color: transparent;
    padding: 0;
    /*width: 100%;*/
    width: 80%;
    margin: 0 auto;

    display: flex;
    align-items: flex-start; /* 名前の上を揃えるなら center に */
    gap: 16px;
    /*margin-bottom: 24px;    */
  }

  .developer-img {
  width: 35%;
  /*height: 80px;*/
  object-fit: cover;
  flex-shrink: 0;
}

.developer-name {
  font-weight: bold;
  /*font-size: 16px;*/
  font-size: 2.5vw;
  margin: 0 0 4px;
}

.developer-title {
  /*font-size: 14px;*/
  font-size: 2vw;
  margin: 0;
}

  .motoroid-developers .developer:nth-child(1),
  .motoroid-developers .developer:nth-child(2),
  .motoroid-developers .developer:nth-child(3) {
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
  }

  .motoroid-developers .developer-name {
    /*font-size: 13px;*/
    font-size: min(16px, 3.0vw);
    margin-bottom: 2px;
    margin-bottom: 1.5vw;
  }

  .motoroid-developers .developer-title {
    /*font-size: 10px;*/
    font-size: 2vw;
    line-height: 1.4;
  }

  .section-header {
    margin-bottom: 15px;
  }

  /* Section Header Grid - Hide on SP */
  .section-header-grid {
    display: none;
  }

  /* Lead */
  .motoroid-lead {
    padding: 16px 16px;
  }

  #motoroid .motoroid-lead p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 1.5em;
  }
  #motoroid .motoroid-lead p:last-child {
    margin-bottom: 0;
  }

  /* Wrap */
  .motoroid-wrap {
    padding: 0 16px;
  }

  /* Section - Stack vertically on mobile */
  .motoroid-section {
    padding: 0 0 20px;
    flex-direction: column;
  }
  .motoroid-section:first-child {
    padding-top: 10px;
  }

  /* Reset order and margin for mobile (header always first) */
  #motoroid .section-02 .section-header.rwd-grid-item.pc-grid4of12 {
    order: unset;
    margin-left: 0;
  }

  #motoroid .section-02 .interview-list.rwd-grid-item.pc-grid8of12 {
    order: unset;
    margin-left: 0;
  }

  /* Interview */
  #motoroid .interview-list {
    gap: 20px;
  }

  #motoroid .interview-item:first-child {
    margin-top: 0;
  }

  #motoroid .interview-question {
    font-size: 14px;
    line-height: 2.4;
    padding: 4px 10px 6px 10px;
  }

  #motoroid .interview-question-wrapper {
    margin-bottom: 20px;
  }

  #motoroid .interview-answer {
    font-size: 14px;
    line-height: 1.9;
    padding-left: 0;
  }

  /* Full Width Section */
  .motoroid-section-fullwidth {
    padding: 0 0 68px;
  }

  /* Machines Image */
  .motoroid-machines-image {
    margin: 0 0 20px;
  }

  /* Interview List Full Width */
  #motoroid .interview-list-fullwidth {
    gap: 20px;
  }

  /* Links Section */
  .motoroid-links-section {
    padding: 0 0 58px;
  }

  .motoroid-links-title {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .motoroid-banners {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 0 10%;
  }

  .motoroid-banners .banner-link {
    width: 100%;
    max-width: 100%;
  }
}

/* ================================================
   Print Styles
   ================================================ */
@media print {
  .motoroid-section {
    page-break-inside: avoid;
  }

  .interview-item {
    page-break-inside: avoid;
    margin-bottom: 20px;
  }
}