@charset "UTF-8";

/* =============================================================================

INTERVIEW SINGLE CSS

・インタビュー詳細用CSS「.u_interview_single-×××」

上記はここに記述する

============================================================================= */

.u_interview_single-container {
}
@media (width > 500px) {
}
@media (width <= 500px) {
  .u_interview_single-container {
  }
}



/* header */
body:has(.u_interview_single-header) :is(.g-header,.g-left_text > p) {
  color:#fff;
}
body:has(.u_interview_single-header) .g-header .logo img {
  filter:brightness(0) invert(1);
  position:relative;
  z-index: 2;
}
html:not(.__scrolled) body:has(.u_interview_single-header):not(.__global_menu-open) .g-global_menu-button svg rect:not(.c) {
  fill:#fff;
}
.u_interview_single-header {
  margin-top:calc(var(--navigation-button-size) * -1);
  padding-top:var(--navigation-button-size);
  background-image:linear-gradient(
    to bottom,
    var(--cc-green-B-hex) calc(100% - 9.0rem),
    transparent calc(100% - 9.0rem)
  );
  font-weight:700;
}
.u_interview_single-header > .kv img {
  width:100%;
}
.u_interview_single-header > .text {
  background-color:var(--cc-gray-B-hex);
}
.u_interview_single-header .text-number {
  display:flex;
  align-items: center;
  gap:1.6rem;
}
.u_interview_single-header .number-heading {
  writing-mode: vertical-rl;
  font-size:1.7rem;
  line-height:1;
  letter-spacing:.15em;
  color:var(--cc-green-B-hex);
}
.u_interview_single-header .number-svg {
  display:flex;
  gap:.8rem;
}
.u_interview_single-header .number-svg svg {
  --ot-w:7.2rem;
  fill:var(--cc-green-B-hex);
  width:var(--ot-ratio-w);
}
.u_interview_single-header .text-heading {
  font-size:2.6rem;
  line-height:calc(45/26);
}
.u_interview_single-header .text-categories {
  display:flex;
  flex-wrap:wrap;
  align-content: flex-start;
  gap:1.6rem 2.4rem;
  font-size:1.5rem;
  line-height:1.5;
  color:var(--cc-green-B-hex);
}
.u_interview_single-header .text-categories > li {
  display:flex;
  gap:.1em;
}
.u_interview_single-header .text-categories > li::before {
  content:"#";
  flex-shrink: 0;
}
@media (width > 500px) {
  .u_interview_single-header {
    padding-inline:var(--navigation-button-size);
    position:relative;
  }
  .u_interview_single-header > .text {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:2.4rem 3.6rem;
    padding:5.0rem 8.0rem;
    width:calc(var(--body-line-size) * 6);
    position:absolute;
    bottom:0;
    left:var(--navigation-button-size);
  }
  .u_interview_single-header > .text:has(.ot._1) {
    column-gap:calc(3.6rem + 7.2rem * 1 / 3);
  }
  .u_interview_single-header .text-heading {
    display:flex;
  }
  .u_interview_single-header .text-categories {
    grid-column:2/3;
  }
}
@media (width <= 500px) {
  .u_interview_single-header {
    background-image:linear-gradient(
      to bottom,
      var(--cc-green-B-hex) calc(100% - 9.0rem),
      transparent calc(100% - 9.0rem)
    );
  }
  .u_interview_single-header > .kv {
    padding-left:var(--navigation-button-size);
  }
  .u_interview_single-header > .text {
    margin-top:-3.0rem;
    padding-top:3.0rem;
    margin-right:var(--navigation-button-size);
    padding-inline:var(--navigation-button-size) 3.0rem;
    background-color:var(--cc-gray-B-hex);
    position:relative;
  }
  .u_interview_single-header .text-number {
    gap:.8rem;
    position:absolute;
    bottom:0;
    right:2.0rem;
    opacity:.2;
  }
  .u_interview_single-header > .text-number:has(.ot._1) {
    right:calc(2.0rem + 4.4rem * 1 / 3);
  }
  .u_interview_single-header .number-heading {
    writing-mode: vertical-rl;
    font-size:1.1rem;
    line-height:1;
    letter-spacing:.15em;
    color:var(--cc-green-B-hex);
  }
  .u_interview_single-header .number-svg {
    display:flex;
    gap:.2rem;
  }
  .u_interview_single-header .number-svg svg {
    --ot-w:4.4rem;
  }
  .u_interview_single-header .text-heading {
    margin-top:calc(.5em - .5lh);
    font-size:1.5rem;
    line-height:calc(50/30);
  }
  .u_interview_single-header .text-categories {
    margin-top:1.2rem;
    padding-bottom:2.0rem;
    width:calc(var(--body-line-size) * 2);
    gap:.4rem .8rem;
    min-height:7.5rem;
    font-size:1.1rem;
  }
  .u_interview_single-header .text-categories > li {
    display:flex;
    gap:.1em;
  }
  .u_interview_single-header .text-categories > li::before {
    content:"#";
    flex-shrink: 0;
  }
}


.u_interview_single-post_contents {
  padding-top:9.0rem;
}
@media (width > 500px) {
}
@media (width <= 500px) {
  .u_interview_single-post_contents {
    padding-top:5.5rem;
  }
}


.u_interview_single-number {
  margin-bottom:7.2rem;
  border-bottom:1px solid;
  font-size:1.6rem;
  font-weight:700;
  color:var(--cc-green-B-hex);
  letter-spacing: .13em;
}
@media (width > 500px) {
  .u_interview_single-number {
    display:flex;
    justify-content:space-between;
    margin-left:var(--navigation-button-size);
    width:var(--body-line-size);
  }
}
@media (width <= 500px) {
  .u_interview_single-number {
    margin-bottom:2.4rem;
    width:fit-content;
    font-size:1.1rem;
  }
}


.u_interview_single-contents {
  display:flex;
}
.u_interview_single-contents .img img {
  width:100%;
}
.u_interview_single-contents .text {
  color:#000;
}
.u_interview_single-contents .text .question {
  display:flex;
  margin-bottom:3.2rem;
  padding-bottom:2.0rem;
  gap:.2em;
  font-size:3.2rem;
  border-bottom:1px solid #000;
  font-weight:700;
  line-height:1.5;
  color:var(--cc-green-B-hex);
}
.u_interview_single-contents .text .heading {
  margin-bottom:1.6rem;
  font-size:2.6rem;
  font-weight:700;
  line-height:1.7;
}
.u_interview_single-contents .text .description {
  font-size:2.0rem;
  line-height:2.1;
}
.u_interview_single-contents .text .question::before {
  content:"Q.";
  flex-shrink: 0;
}
@media (width > 500px) {
  .u_interview_single-contents {
  }
  .u_interview_single-contents:is(.-left,.-right):has(.img) {
    align-items: center;
    gap:var(--body-line-size);
  }
  .u_interview_single-contents.-left:has(.img) {
    padding-right:calc(var(--body-line-size) + var(--navigation-button-size));
    flex-direction:row-reverse;
  }
  .u_interview_single-contents.-right:has(.img) {
    padding-left:calc(var(--body-line-size) + var(--navigation-button-size));
  }
  .u_interview_single-contents.-left + .u_interview_single-contents.-right:has(.img),
  .u_interview_single-contents.-right + .u_interview_single-contents.-left:has(.img) {
    margin-top:-6.0rem;
  }
  .u_interview_single-contents.-left + .u_interview_single-contents.-left:has(.img),
  .u_interview_single-contents.-right + .u_interview_single-contents.-right:has(.img) {
    margin-top:6.0rem;
  }
  .u_interview_single-contents.-top,
  .u_interview_single-contents:is(.-left,.-right):not(:has(.img)) {
    flex-direction: column;
    gap:7.0rem;
    margin-inline:auto;
    width:calc(var(--body-line-size) * 10);
  }
  .u_interview_single-contents.-top:not(:first-of-type),
  .u_interview_single-contents.-top + .u_interview_single-contents:is(.-left,.-right),
  .u_interview_single-contents:is(.-left,.-right) + .u_interview_single-contents:is(.-left,.-right):not(:has(.img)) {
    margin-top:12.0rem;
  }
  .u_interview_single-contents .img {
    flex-shrink: 0;
  }
  .u_interview_single-contents:is(.-left,.-right) .img {
    width:calc(var(--body-line-size) * 5 + var(--navigation-button-size));
  }
  .u_interview_single-contents:is(.-left,.-right):has(.img) .text {
    padding-block:12.0rem;
  }
  .u_interview_single-post_contents .l-single-pager-A {
    margin-inline:auto;
    padding-inline:calc(var(--body-line-size) * 2);
    width:calc(var(--body-line-size) * 10);
  }
}
@media (width <= 500px) {
  .u_interview_single-contents {
    flex-direction: column;
    gap:2.4rem;
  }
  .u_interview_single-contents + .u_interview_single-contents {
    margin-top:5.0rem;
  }
  .u_interview_single-contents .text .question {
    display:flex;
    margin-bottom:2.0rem;
    padding-bottom:1.0rem;
    font-size:1.6rem;
  }
  .u_interview_single-contents .text .heading {
    margin-bottom:1.2rem;
    font-size:1.4rem;
    font-weight:700;
  }
  .u_interview_single-contents .text .description {
    font-size:1.3rem;
    line-height:1.8;
  }
}

.u_interview_single-profile {
  color:#fff;
  background-color:var(--cc-green-B-hex);
  font-weight:700;
  line-height:1.5;
  position:relative;
  z-index: 1;
}
.u_interview_single-profile .deco-number {
  display:flex;
  position:absolute;
  z-index: -1;
}
.u_interview_single-profile .deco-number {
  display:flex;
  gap:1.0rem;
  position:absolute;
  right:6.0rem;
  bottom:0;
  opacity:.1;
}
.u_interview_single-profile .deco-number svg {
  --ot-w:14.2rem;
  fill:#fff;
  width:var(--ot-ratio-w);
}
.u_interview_single-profile .heading {
  margin-bottom:4.0rem;
  font-size:4.2rem;
  letter-spacing: .13em;
}
.u_interview_single-profile .company {
  margin-bottom:1.6rem;
  font-size:1.8rem;
}
.u_interview_single-profile .position_name {
  margin-bottom:2.0rem;
  font-size:1.6rem;
}
.u_interview_single-profile .name {
  margin-inline:.5em .25em;
  font-size:1.5em;
}
.u_interview_single-profile .date {
  font-size:1.6rem;
}
@media (width > 500px) {
  .u_interview_single-profile {
    display:grid;
    grid-template-rows:1fr auto auto auto auto 1fr;
    grid-template-columns:39.0rem auto;
    column-gap:12.0rem;
    margin-top:15.0rem;
    min-height:40.0rem;
    margin-inline:auto;
    width:calc(var(--body-line-size) * 10);
  }
  .u_interview_single-profile:not(:has(.img)) {
    padding-left:8.0rem;
    grid-template-columns:1fr auto;
  }
  .u_interview_single-profile .img {
    grid-row:1/-1;
    grid-column:1/2;
  }
  .u_interview_single-profile .heading {
    grid-row:2/3;
  }
  .u_interview_single-profile .company {
    grid-row:3/4;
  }
  .u_interview_single-profile .position_name {
    grid-row:4/5;
  }
  .u_interview_single-profile .date {
    grid-row:5/6;
  }
}
@media (width <= 500px) {
  .u_interview_single-profile {
    display:flex;
    flex-direction: column;
    margin-top:4.0rem;
    padding:2.0rem 2.0rem 1.6rem;
  }
  .u_interview_single-profile:has(.img) {
    min-height:31.0rem;
  }
  .u_interview_single-profile .deco-number {
    display:flex;
    position:absolute;
    z-index: -1;
  }
  .u_interview_single-profile .deco-number {
    gap:.4rem;
    right:.8rem;
  }
  .u_interview_single-profile .deco-number svg {
    --ot-w:5.0rem;
  }
  .u_interview_single-profile .heading {
    margin-bottom:1.0rem;
    font-size:2.1rem;
  }
  .u_interview_single-profile .img {
    height:16.0rem;
  }
  .u_interview_single-profile .img + * {
    margin-top:1.0rem;
  }
  .u_interview_single-profile .company {
    margin-bottom:0;
    font-size:1.2rem;
  }
  .u_interview_single-profile .position_name {
    margin-bottom:.6rem;
    font-size:1.2rem;
  }
  .u_interview_single-profile .name {
    margin-inline:.1em .05em;
    font-size:1.2em;
  }
  .u_interview_single-profile .date {
    margin-top:auto;
    font-size:1.1rem;
  }
  .u_interview_single-profile:not(:has(.img)) .date {
    margin-top:.4rem;
  }
}