/* sassなし　同期お願いします */
/* 「YCC MAGAZINE」ページ用 */

/* Reset */
.lower .section__block {
  margin-right: 0;
}
.lower .section__wrap {
  padding-bottom: 0;
}
.lower.ycc-magazine .footer, .lower.magazine-detail .footer {
  margin-top: 0;
}

/* Common */
#ycc-magazine .wrapper {
  width: 100%;
  max-width: 930px;
  margin: 0 auto;
  padding: 0;
}
#ycc-magazine .txt, 
#ycc-magazine .txtlink {
  font-size: 1.5rem;
  line-height: 1.7;
  color: #111111;
}
#ycc-magazine .txt-white {
  color: #FFFFFF !important;
}
#ycc-magazine .txt-darkblue {
  color: #4E4194 !important;
}
#ycc-magazine .txtlink {
  color: #FFFF01;
  border-bottom: 1px solid #FFFF01;
  transition: opacity 0.3s;
}
#ycc-magazine .txtlink:hover {
  opacity: 0.7;
}
#ycc-magazine .main-ttl {
  font-size: 2.8rem;
  font-weight: 700;
  color: #4E4194;
  line-height: 1.6;
}
#ycc-magazine .sub-ttl {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111111;
  line-height: 1.7;
  position: relative;
  padding-left: 26px;
}
#ycc-magazine .sub-ttl::before {
  position: absolute;
  top: 11px;
  left: 0;
  width: 22px;
  height: 1px;
  content: "";
  background: #111111;
}
#ycc-magazine .blk-ttl {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #4E4194;
  line-height: 1.6;
}
#ycc-magazine .head-ttl {
  display: inline-block;
  background-color: #F1EFFE;
  padding: 1rem;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: #4E4194;
}
#ycc-magazine .sm-ttl {
  font-size: 2.4rem;
  font-weight: 700;
  color: #FFFF01;
  line-height: 1.4;
}
#ycc-magazine .bg-darkblue {
  background-color: #4E4194;
  padding: 100px 0;
}
#ycc-magazine .bg-darkblue .head-ttl {
  background-color: #FFFFFF;
  color: #4E4194;
}


/* -- Yccマガジン一覧 -- */
#ycc-magazine .section__mv {
  position: relative;
  background: url(../images/ycc-magazine/magazine-mv.jpg) no-repeat top left;
  background-size: cover;
  min-height: 330px;
  margin-top: 30px;
  margin-bottom: 60px;
}
#ycc-magazine .section__mv::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgb(78 65 148 / 70%);
}
#ycc-magazine .ttl-wrapper {
  background: url(../images/ycc-magazine/ttl-bg.jpg) no-repeat top center;
  background-size: cover;
  max-width: 520px;
  width: 100%;
  height: 118px;

  display: flex;
  align-items: center;
  justify-content: center;  
  column-gap: 15px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
}
#ycc-magazine .ttl-wrapper h2.sec-ttl {
  position: relative;
  display: inline-block;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 4rem;
  font-weight: 700;
  color: #4E4194;
}
#ycc-magazine .ttl-wrapper h2.sec-ttl::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: #FEF706;
  z-index: -1;
}
#ycc-magazine .ttl-wrapper .pen-icon {
  width: 30px;
  height: auto;
}

#ycc-magazine .section__magazine .magazine-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 45px;
  margin: 40px 0;
}
#ycc-magazine .section__magazine .magazine-menu .menu-item {
  width: 160px;
  height: auto;
  border: 1px solid #4E4194;
  padding: 5px;

  font-size: 1.5rem;
  line-height: 1.6;
  color: #4E4194;
  text-align: center;

  cursor: pointer;
  transition: all 0.3s;
}
#ycc-magazine .section__magazine .magazine-menu .menu-item.active {
  background-color: #4E4194;
  color: #ffffff;
}
#ycc-magazine .section__magazine .magazine-menu .menu-item:hover {
  background-color: #4E4194;
  color: #ffffff;
}

#ycc-magazine .section__magazine .magazine-lists, 
#ycc-magazine .other-magazine .magazine-lists {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 40px;
  column-gap: 40px;
}
#ycc-magazine .section__magazine .magazine-lists li a, 
#ycc-magazine .other-magazine .magazine-lists li a {
  display: block;
  transition: all 0.3s;
}
#ycc-magazine .section__magazine .magazine-lists li a:hover, 
#ycc-magazine .other-magazine .magazine-lists li a:hover {
  opacity: 0.7;
}
#ycc-magazine .section__magazine .magazine-lists li a img, 
#ycc-magazine .other-magazine .magazine-lists li a img {
  width: 280px;
  height: auto;
}
#ycc-magazine .section__magazine .magazine-lists li a h5, 
#ycc-magazine .other-magazine .magazine-lists li a h5 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111111;
  line-height: 1.7;
  margin-top: 10px;
}
#ycc-magazine .section__magazine .magazine-lists li a time, 
#ycc-magazine .other-magazine .magazine-lists li a time {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  color: #666D70;
  margin-top: 8px;
}

#ycc-magazine .section__magazine .section__contents__btn {
  display: block;
  width: 28.2rem;
  line-height: 1.6;
  margin: 6rem auto 0;
}

/* -- Yccマガジン詳細 -- */
/* MV */
#ycc-magazine .magazine-heading {
  display: flex;
  justify-content: flex-end;
  padding: 4rem 0 8rem 0;
}
#ycc-magazine .magazine-heading__wrapper {
  position: relative;
  width: 90%;
  padding: 0 0 30px 30px;
}
#ycc-magazine .magazine-heading .magazine-heading__mv {
  position: relative;
  width: 100%;
  height: auto;
}
#ycc-magazine .magazine-heading .magazine-heading__mv::after {
  position: absolute;
  bottom: -30px;
  left: -30px;
  content: '';
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
      -45deg,
      #605c9d,
      #605c9d 3px,
      transparent 3px,
      transparent 6px
  );
  z-index: 1;
}
#ycc-magazine .magazine-heading .magazine-heading__mv .mv-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}
#ycc-magazine .magazine-heading .magazine-heading__text {
  position: absolute;
  left: -9rem;
  bottom: 6rem;
  z-index: 3;
}
#ycc-magazine .magazine-heading .magazine-heading__text time {
  display: block;
  font-size: 1.6rem;
  font-weight: 400;
  color: #4E4194;
}
#ycc-magazine .magazine-heading .magazine-heading__text .tag {
  display: flex;
  column-gap: 10px;
  margin-top: 20px;
}
#ycc-magazine .magazine-heading .magazine-heading__text .tag span, 
#ycc-magazine .magazine-heading .magazine-heading__text .magazine-heading__tag {
  display: inline-block;
  padding: 6px 12px;
  font-size: 2rem;
  font-weight: 700;
}
#ycc-magazine .magazine-heading .magazine-heading__text .tag .alumni {
  background-color: #FFFF47;
  border: 1px solid #4E4194;
  color: #4E4194;
}
#ycc-magazine .magazine-heading .magazine-heading__text .tag .department, 
#ycc-magazine .magazine-heading .magazine-heading__text .magazine-heading__tag {
  background-color: #4E4194;
  border: 1px solid #4E4194;
  color: #FFFFFF;
}
#ycc-magazine .magazine-heading .magazine-heading__text .magazine-heading__ttl {
  display: inline-block;
  background-color: #F1EFFE;
  padding: 1rem;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: #4E4194;
  margin-top: 20px;
}
/* Profile & PICK UP */
#ycc-magazine .magazine-detail .profile, 
#ycc-magazine .magazine-detail .pickup  {
  position: relative;
}
#ycc-magazine .magazine-detail .profile .profile-inner, 
#ycc-magazine .magazine-detail .pickup .pickup-inner {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #4E4194;
  padding: 40px;
  z-index: 2;
}
#ycc-magazine .magazine-detail .pickup .pickup-inner.lightblue {
  background-color: #F1EFFE;
}
#ycc-magazine .magazine-detail .profile::after, 
#ycc-magazine .magazine-detail .pickup::after {
  position: absolute;
  bottom: -30px;
  right: -30px;
  content: '';
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
      -45deg,
      #605c9d,
      #605c9d 3px,
      transparent 3px,
      transparent 6px
  );
  z-index: 1;
}
#ycc-magazine .magazine-detail .profile .profile-inner .name {
  font-size: 2.4rem;
  font-weight: 700;
  color: #FFFFFF;
}
#ycc-magazine .magazine-detail .profile .profile-inner .department {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #4E4194;
  background-color: #FFFFFF;
  padding: 6px 12px;
}
#ycc-magazine .magazine-detail .pickup .pickup-inner .blk-ttl {
  color: #FFFF01;
}
#ycc-magazine .magazine-detail .pickup .pickup-inner.lightblue .blk-ttl {
  color: #4E4194;
}
/* INDEX */
#ycc-magazine .magazine-detail .content-index {
  display: flex;
  gap: 80px;

  padding: 40px;
  border-top: 3px solid #4E4194;
  border-bottom: 3px solid #4E4194;
}
#ycc-magazine .magazine-detail .content-index .list-ttl {
  font-size: 1.8rem;
  font-weight: 700;
  color: #4E4194;
}
#ycc-magazine .magazine-detail .content-index .content-lists {
  list-style-type: disc;
  padding-left: 18px;
}
#ycc-magazine .magazine-detail .content-index .content-lists li::marker {
  font-size: 1.5rem;
  color: #4E4194;
}
#ycc-magazine .magazine-detail .content-index .content-lists li:not(:last-child) {
  padding-bottom: 5px;
}
#ycc-magazine .magazine-detail .content-index .content-lists li a {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.7;
  color: #111111;
  transition: color 0.3s;
}
#ycc-magazine .magazine-detail .content-index .content-lists li a:hover {
  color: #4E4194;
}
/* Content Detail */
#ycc-magazine .magazine-detail img {
  width: 100%;
  height: auto;
}
#ycc-magazine .magazine-detail .img-caption {
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.8;
  color: #707070;
  margin-top: 10px;
}
#ycc-magazine .magazine-detail .flex {
  display: flex;
}
#ycc-magazine .magazine-detail .flex.gap40 {
  gap: 40px;
}
#ycc-magazine .magazine-detail .flex.gap30 {
  gap: 30px;
}
#ycc-magazine .magazine-detail .flex.gap20 {
  gap: 20px;
}
#ycc-magazine .magazine-detail .flex .col2 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}
#ycc-magazine .magazine-detail .flex .col3 {
  -ms-flex-preferred-size: 33.33333%;
  flex-basis: 33.33333%;
  max-width: 33.33333%;
}
#ycc-magazine .magazine-detail .flex .img-blk {
  flex: 1 1;
}
#ycc-magazine .magazine-detail .flex .txt-blk {
  flex: 2 1;
}
#ycc-magazine .magazine-detail .speak-box {
  display: flex;
  gap: 35px;
}
#ycc-magazine .magazine-detail .speak-box .speaker {
  max-width: 100px;
  text-align: center;
}
#ycc-magazine .magazine-detail .speak-box .speaker .img-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
#ycc-magazine .magazine-detail .speak-box .speaker .name {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 2;
  color: #4E4194;
}
#ycc-magazine .magazine-detail .speak-box .speak-bubble {
  flex: 1;
  background-color: #F1EFFE;
  border-radius: 16px;
  padding: 30px;
  position: relative;
}
#ycc-magazine .magazine-detail .speak-box .speak-bubble::after, 
#ycc-magazine .magazine-detail .speak-box .speak-bubble.reverse::before {
  position: absolute;
  top: 45px;
  content: "";
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
#ycc-magazine .magazine-detail .speak-box .speak-bubble::after {
  left: -25px;
  content: "";
  border-right: 26px solid #F1EFFE;
}
#ycc-magazine .magazine-detail .speak-box .speak-bubble.reverse::after {
  display: none;
}
#ycc-magazine .magazine-detail .speak-box .speak-bubble.reverse::before {
  right: -25px;
  content: "";
  border-left: 26px solid #F1EFFE;
}

/* OTHER MAGAZINE */
#ycc-magazine .other-magazine {
  background-color: #F1EFFE;
  padding: 100px 0;
}
#ycc-magazine .other-magazine .ttl-underline {
  font-size: 2.4rem;
  font-weight: 700;
  color: #111111;
  line-height: 1.4;

  position: relative;
  padding-bottom: 2rem;
}
#ycc-magazine .other-magazine .ttl-underline::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4rem;
  height: 0.4rem;
  content: "";
  background: #4E4194;
}

/* -- Yccマガジン詳細（通常版） -- */
#ycc-magazine .magazine-detail.detail01 .profile .profile-inner {
  display: flex;
  gap: 40px;
}
#ycc-magazine .magazine-detail.detail01 .profile .profile-img img {
  width: 200px;
  height: auto;
}

/* -- Yccマガジン詳細（対談版） -- */
#ycc-magazine .magazine-detail.detail02 .profile .profile-inner {
  padding: 40px 60px;
}
#ycc-magazine .magazine-detail.detail02 .profile .profile-inner .profile-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}
#ycc-magazine .magazine-detail.detail02 .profile .profile-inner .profile-list .profile-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
#ycc-magazine .magazine-detail.detail02 .profile .profile-inner .profile-list .profile-item img {
  width: 100%;
  height: auto;
}
#ycc-magazine .magazine-detail.detail02 .profile .profile-inner .profile-list .profile-item .intro {
  text-align: center;
}
#ycc-magazine .magazine-detail.detail02 .profile .profile-inner .name {
  font-size: 2rem;
}


@media screen and (max-width: 767px) { 
  /* Common */
  #ycc-magazine .wrapper {
    max-width: 100%;
    padding: 0 15px;
  }
  #ycc-magazine .txt, 
  #ycc-magazine .txtlink {
    font-size: 1.3rem;
  }
  #ycc-magazine .main-ttl {
    font-size: 2rem;
  }
  #ycc-magazine .sub-ttl {
    font-size: 1.3rem;
    padding-left: 22px;
  }
  #ycc-magazine .sub-ttl::before {
    top: 9px;
    width: 18px;
  }
  #ycc-magazine .blk-ttl {
    font-size: 1.6rem;
  }
  #ycc-magazine .head-ttl {
    font-size: 1.6rem;
  }

  /* -- Yccマガジン一覧 -- */
  #ycc-magazine .section__mv {
    background: url(../images/ycc-magazine/magazine-mv_sp.jpg) no-repeat top left;
    background-size: cover;
    min-height: 150px;
    margin-top: 0;
    margin-bottom: 40px;
  }
  #ycc-magazine .ttl-wrapper {
    background: url(../images/ycc-magazine/ttl-bg_sp.jpg) no-repeat top center;
    background-size: cover;
    max-width: 345px;
    height: 70px;
    column-gap: 10px;
  }
  #ycc-magazine .ttl-wrapper h2.sec-ttl {
    font-size: 2.4rem;
  }
  #ycc-magazine .ttl-wrapper h2.sec-ttl::after {
    height: 5px;
  }
  #ycc-magazine .ttl-wrapper .pen-icon {
    width: 18px;
  }
  #ycc-magazine .section__magazine .magazine-menu {
    gap: 6px;
    padding: 0;
  }
  #ycc-magazine .section__magazine .magazine-menu .menu-item {
    width: 111px;
    font-size: 1.2rem;
    line-height: 1.4;
  }
  #ycc-magazine .section__magazine .magazine-lists {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
    column-gap: 15px;
  }
  #ycc-magazine .section__magazine .magazine-lists li a img {
    width: 165px;
  }
  #ycc-magazine .section__magazine .magazine-lists li a h5, 
  #ycc-magazine .other-magazine .magazine-lists li a h5 {
    font-size: 1.3rem;
  }
  #ycc-magazine .section__magazine .magazine-lists li a time, 
  #ycc-magazine .other-magazine .magazine-lists li a time {
    margin-top: 4px;
  }
  #ycc-magazine .section__magazine .section__contents__btn {
    width: 22rem;
    margin: 4rem auto 0;
  }

  /* -- Yccマガジン詳細 -- */
  /* MV */
  #ycc-magazine .magazine-heading {
    padding: 0 0 4rem 0;
  }
  #ycc-magazine .magazine-heading__wrapper {
    padding: 0 0 15px 15px;
  }
  #ycc-magazine .magazine-heading .magazine-heading__mv::after {
    bottom: -15px;
    left: 0;
  }
  #ycc-magazine .magazine-heading .magazine-heading__text {
    position: relative;
    left: -3.5rem;
    bottom: auto;
    margin-top: -12rem;
  }
  #ycc-magazine .magazine-heading .magazine-heading__text time {
    font-size: 1.2rem;
  }
  #ycc-magazine .magazine-heading .magazine-heading__text .tag {
    column-gap: 5px;
    margin-top: 10px;
  }
  #ycc-magazine .magazine-heading .magazine-heading__text .tag span, 
  #ycc-magazine .magazine-heading .magazine-heading__text .magazine-heading__tag {
    padding: 5px 10px;
    font-size: 1.2rem;
  }
  #ycc-magazine .magazine-heading .magazine-heading__text .magazine-heading__ttl {
    font-size: 1.6rem;
    margin-top: 10px;
  }
  /* Profile & PICK UP */
  #ycc-magazine .magazine-detail .profile .profile-inner, 
  #ycc-magazine .magazine-detail .pickup .pickup-inner {
    padding: 20px;
  }
  #ycc-magazine .magazine-detail .profile::after, 
  #ycc-magazine .magazine-detail .pickup::after {
    bottom: -15px;
    right: -15px;
  }
  #ycc-magazine .magazine-detail .profile .profile-inner .name {
    font-size: 2rem;
  }
  #ycc-magazine .magazine-detail .profile .profile-inner .department {
    font-size: 1.2rem;
    padding: 5px 10px;
  }
  /* INDEX */
  #ycc-magazine .magazine-detail .content-index {
    flex-direction: column;
    gap: 10px;
    padding: 30px 0;
  }
  #ycc-magazine .magazine-detail .content-index .list-ttl {
    font-size: 1.6rem;
  }
  #ycc-magazine .magazine-detail .content-index .content-lists {
    padding-left: 15px;
  }
  #ycc-magazine .magazine-detail .content-index .content-lists li::marker, 
  #ycc-magazine .magazine-detail .content-index .content-lists li:not(:last-child) {
    padding-bottom: 10px;
  }
  #ycc-magazine .magazine-detail .content-index .content-lists li a {
    font-size: 1.3rem;
  }
  /* Content Detail */
  #ycc-magazine .magazine-detail .img-caption {
    font-size: 1.2rem;
  }
  #ycc-magazine .magazine-detail .flex.flex-column {
    flex-direction: column;
  }
  #ycc-magazine .magazine-detail .flex.gap40 {
    gap: 20px;
  }
  #ycc-magazine .magazine-detail .flex.gap30 {
    gap: 15px;
  }
  #ycc-magazine .magazine-detail .flex.gap20 {
    gap: 10px;
  }
  #ycc-magazine .magazine-detail .speak-box {
    gap: 20px;
  }
  #ycc-magazine .magazine-detail .speak-box .speaker {
    max-width: 60px;
  }
  #ycc-magazine .magazine-detail .speak-box .speaker .img-circle {
    width: 60px;
    height: 60px;
  }
  #ycc-magazine .magazine-detail .speak-box .speaker .name {
    font-size: 1.2rem;
  }
  #ycc-magazine .magazine-detail .speak-box .speak-bubble {
    border-radius: 10px;
    padding: 20px;
  }
  #ycc-magazine .magazine-detail .speak-box .speak-bubble::after, 
  #ycc-magazine .magazine-detail .speak-box .speak-bubble.reverse::before {
    top: 25px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
  #ycc-magazine .magazine-detail .speak-box .speak-bubble::after {
    left: -12px;
    border-right: 12px solid #F1EFFE;
  }
  #ycc-magazine .magazine-detail .speak-box .speak-bubble.reverse::before {
    right: -12px;
    border-left: 12px solid #F1EFFE;
  }
  /* OTHER MAGAZINE */
  #ycc-magazine .other-magazine {
    padding: 60px 0;
  }
  #ycc-magazine .other-magazine .ttl-underline {
    font-size: 1.5rem;
  }
  #ycc-magazine .other-magazine .magazine-lists {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 30px;
  }
  #ycc-magazine .other-magazine .magazine-lists li a img {
    width: 100%;
  }
  #ycc-magazine .other-magazine .ttl-underline {
    font-size: 1.5rem;
    padding-bottom: 1rem;
  }
  #ycc-magazine .other-magazine .ttl-underline::after {
    width: 3.5rem;
    height: 0.2rem;
  }

  /* -- Yccマガジン詳細（通常版） -- */
  #ycc-magazine .magazine-detail.detail01 .profile .profile-inner {
    flex-direction: column;
    gap: 20px;
  }
  #ycc-magazine .magazine-detail.detail01 .profile .profile-img {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  #ycc-magazine .magazine-detail.detail01 .profile .profile-img img {
    width: 90px;
    height: auto;
  }

  /* -- Yccマガジン詳細（対談版） -- */
  #ycc-magazine .magazine-detail.detail02 .profile .profile-inner {
    padding: 20px;
  }
  #ycc-magazine .magazine-detail.detail02 .profile .profile-inner .profile-list {
    grid-template-columns: auto;
    gap: 20px;
  }
  #ycc-magazine .magazine-detail.detail02 .profile .profile-inner .profile-list .profile-item {
    flex-direction: row;
  }
  #ycc-magazine .magazine-detail.detail02 .profile .profile-inner .profile-list .profile-item .intro {
    text-align: left;
  }
  #ycc-magazine .magazine-detail.detail02 .profile .profile-inner .name {
    font-size: 1.5rem;
  }
  #ycc-magazine .magazine-detail.detail02 .profile .profile-inner .blk-ttl, 
  #ycc-magazine .magazine-detail .pickup .pickupe-inner .blk-ttl {
    font-size: 1.8rem;
  }
}