@charset "utf-8";
/* CSS Document */

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

   コンテンツ
 
=================================================================================== */
/* ============================
   調整
============================ */
#useful .content-columns.left-detail1 {
  padding: 80px 0 0;
}

#useful .right-column {
  padding-top: 360px;
}

#useful .columns-inner {
  position: relative;
  z-index: 1;
}

/* ============================
   記事　カテゴリタイトル
============================ */
#useful .content-columns .detail-title .category-title {
  display: block;
  width: fit-content;
  color: #fff;
  font-size: 0.75rem; /* 12px */
  font-weight: normal;
  padding: 8px 17px;
}

#useful .content-columns .detail-title .category-title span {
  position: relative;
  font-family: 'Ropa Sans', sans-serif;
  font-size: 1.125rem; /* 18px */
  padding-left: 18px;
}

#useful .content-columns .detail-title .category-title span:before {
  content: '●';
  background: ' #fff';
  font-size: 0.5625rem; /* 9px */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

#useful .content-columns .detail-title .category-title.work {
  background: #41bba7;
}
#useful .content-columns .detail-title .category-title.event {
  background: #ffaa00;
}
#useful .content-columns .detail-title .category-title.student {
  background: #00b4ff;
}
#useful .content-columns .detail-title .category-title.know-how {
  background: #8278ff;
}
#useful .content-columns .detail-title .category-title.release {
  background: #ff5e7a;
}
#useful .content-columns .detail-title .category-title.other {
  background: #aaaaa0;
}

#useful .detail {
}

#useful .detail .title {
  font-size: 2.25rem;
  font-weight: bold;
  margin-bottom: 50px;
}

#useful .detail .detail-date {
  font-size: 0.65rem;
  color: #bebebe;
  margin-bottom: 30px;
}

#useful .detail .detail-tags {
  margin-bottom: 60px;
}

#useful .detail .detail-tags span {
  font-size: 1rem;
  margin-right: 23px;
}

/* ============================
   記事　内容
============================ */
#useful .content {
  width: 100%;
  position: relative;
  background: #f2f2f2;
}

#useful .content:before {
  content: '';
  background: #fff;
  width: 100%;
  height: 550px;
  position: absolute;
  left: 0;
  top: 0;
}

/* 画像 */
/*#useful .content .content-columns .columns-inner .left-column .columns-img1,
#useful .content .content-columns .columns-inner .left-column .columns-img2 {
 margin-bottom: 70px;
}*/

#useful .u-mb-5 {
  margin-bottom: 5px;
}

#useful .u-mb-10 {
  margin-bottom: 10px;
}

#useful .u-mb-15 {
  margin-bottom: 15px;
}

#useful .u-mb-20 {
  margin-bottom: 20px;
}

#useful .u-mb-25 {
  margin-bottom: 25px;
}

#useful .u-mb-30 {
  margin-bottom: 30px;
}

#useful .u-mb-35 {
  margin-bottom: 35px;
}

#useful .u-mb-40 {
  margin-bottom: 40px;
}

#useful .u-mb-45 {
  margin-bottom: 45px;
}

#useful .u-mb-50 {
  margin-bottom: 50px;
}

#useful .u-mb-55 {
  margin-bottom: 55px;
}

#useful .u-mb-60 {
  margin-bottom: 60px;
}

#useful .u-mb-65 {
  margin-bottom: 65px;
}

#useful .u-mb-70 {
  margin-bottom: 70px;
}

#useful .u-mb-75 {
  margin-bottom: 75px;
}

#useful .u-mb-80 {
  margin-bottom: 80px;
}

#useful .u-mb-85 {
  margin-bottom: 85px;
}

#useful .u-mb-90 {
  margin-bottom: 90px;
}

#useful .u-mb-95 {
  margin-bottom: 95px;
}

#useful .u-mb-100 {
  margin-bottom: 100px;
}

#useful .content .content-columns .columns-inner .left-column .columns-img2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#useful .content .content-columns .columns-inner .left-column .columns-img2 .img {
  width: 48%;
}

#useful .content .content-columns .columns-inner .left-column .columns-img2 .img .caption {
  margin-top: 10px;
}

#useful .content .content-columns .columns-inner .left-column .columns-img1 .img .caption {
  margin-top: 10px;
}

/* 見出し */
/*#useful .content .content-columns .columns-inner .left-column .midashi {
  position: relative;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  padding-left: 30px;
  margin-bottom: 37px;
}

#useful .content .content-columns .columns-inner .left-column .midashi:before {
  content: "";
  background: linear-gradient(to top, #9bdfd6, #87c593, #41b6a2, #9bdfd6);
  width: 5px;
  height: 80px;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  left: 0;
}*/

#useful .content .content-columns .columns-inner .left-column .midashi {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 30px;
}

#useful .midashi .line {
  width: 5px;
  height: 80px;
  background: linear-gradient(to top, #9bdfd6, #87c593, #41b6a2, #9bdfd6);
  flex-shrink: 0;
}

#useful .midashi .txt {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

#useful .content .content-columns .columns-inner .left-column .midashi-sub {
  position: relative;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  padding-left: 22px;
}

#useful .content .content-columns .columns-inner .left-column .midashi-sub:before {
  content: '●';
  font-size: 0.625rem; /* 9px */
  position: absolute;
  top: 0;
  transform: none;
  left: 0;
}

/* 文章 */
/*#useful .content .content-columns .columns-inner .left-column .txt {
  margin-bottom: 80px;
}*/

/* ===============================
   リンク共通
================================ */

#useful .left-column .txt a {
  position: relative;
  text-decoration: none;
  vertical-align: baseline;
}

/* 下線（ベース） */

#useful .left-column .txt a::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -4px;
}

/* hover線 */

#useful .left-column .txt a::before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -4px;
  transition: 0.3s;
  z-index: 2;
}

#useful .left-column .txt a:hover::before {
  width: 100%;
}

/* ===============================
   外部リンク
================================ */

#useful .left-column .txt a[target='_blank']:not([href$='.pdf' i]) {
  color: #41bba7;
  padding-left: 20px;
}

#useful .left-column .txt a[target='_blank']:not([href$='.pdf' i])::after {
  background: #41bba7;
}

#useful .left-column .txt a[target='_blank']:not([href$='.pdf' i])::before {
  background: #000;
}

/* 外部リンクアイコン */

#useful .left-column .txt a[target='_blank']:not([href$='.pdf' i]) {
  background: url(../images/useful/link-green.svg) left center / 14px no-repeat;
}

/* ===============================
   PDFリンク
================================ */

#useful .left-column .txt a[href$='.pdf' i] {
  padding-left: 20px;
  background: url(../images/useful/pdf.svg) left center / 13px 15px no-repeat;
}

#useful .left-column .txt a[href$='.pdf' i]::after {
  background: #000;
}

#useful .left-column .txt a[href$='.pdf' i]::before {
  background: #41bba7;
}

/* YouTube */
#useful .content .content-columns .columns-inner .left-column .movie {
  max-width: 770px;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 70px;
}

#useful .content .content-columns .columns-inner .left-column .movie iframe {
  width: 100%;
  height: 100%;
}

/* イベント */
#useful .content .content-columns .columns-inner .left-column .event-detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 2px solid #41bba7;
  background: #fff;
  padding: 40px;
  margin-bottom: 70px;
}

#useful .content .content-columns .columns-inner .left-column .event-detail .img-box {
  width: 41%;
}

#useful .content .content-columns .columns-inner .left-column .event-detail .txt-box {
  width: 55%;
}

#useful .content .content-columns .columns-inner .left-column .event-detail .txt-box .txt-box-title {
  position: relative;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  padding-left: 20px;
}

#useful .content .content-columns .columns-inner .left-column .event-detail .txt-box .txt-box-title:before {
  content: '';
  background: #000;
  width: 4px;
  height: 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

#useful .content .content-columns .columns-inner .left-column .event-detail .txt-box .txt-box-txt {
  margin-bottom: 10px;
}

#useful .content .content-columns .columns-inner .left-column .event-detail .txt-box .txt-box-link {
  width: 85%;
  display: block;
  position: relative;
  transition: 0.3s;
  margin-bottom: 12px;
}

#useful .content .content-columns .columns-inner .left-column .event-detail .txt-box .txt-box-link:before {
  content: '';
  display: block;
  background: #000;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -12px;
  margin: auto;
}

#useful .content .content-columns .columns-inner .left-column .event-detail .txt-box .txt-box-link:after {
  content: '';
  background: #41bba7;
  width: 0;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -12px;
  transition: 0.3s;
  z-index: 2;
}

#useful .content .content-columns .columns-inner .left-column .event-detail .txt-box .txt-box-link span {
  width: 100%;
  display: block;
  background: url(../images/common/arrow.svg) right center / 4px 8px no-repeat;
  position: relative;
}

#useful .content .content-columns .columns-inner .left-column .event-detail .txt-box .txt-box-link span:before {
  content: '';
  display: block;
  background: #000;
  width: 40px;
  height: 1px;
  position: absolute;
  top: 50%;
  right: 10px;
  bottom: 0;
  transition: 0.3s;
}

/* 開催等 */
#useful .content .content-columns .columns-inner .left-column .summary .summary-inner {
  margin-bottom: 50px;
}

#useful .content .content-columns .columns-inner .left-column .summary .summary-inner .summary-title {
  position: relative;
  font-size: 1.5rem;
  font-weight: bold;
  padding-left: 20px;
}

#useful .content .content-columns .columns-inner .left-column .summary .summary-inner .summary-title:before {
  content: '';
  background: #000;
  width: 4px;
  height: 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

#useful .content .content-columns .columns-inner .left-column .summary .summary-inner ul li {
  font-size: 0.875rem;
  margin-bottom: 5px;
}

/* 問い合わせ先 */
#useful .content .content-columns .columns-inner .left-column .contact-detail {
  margin-bottom: 50px;
}

/* リンク */
#useful .content .content-columns .columns-inner .left-column .link-detail {
  margin-bottom: 70px;
}

#useful .content .content-columns .columns-inner .left-column .link-detail ul li {
  border-bottom: 1px solid #000;
}

#useful .content .content-columns .columns-inner .left-column .link-detail ul li:first-child {
  border-top: 1px solid #000;
}

#useful .content .content-columns .columns-inner .left-column .link-detail ul li a {
  width: 100%;
  display: block;
  font-size: 0.875rem;
  padding: 35px 0 40px 35px;
  position: relative;
  transition: 0.3s;
}

#useful .content .content-columns .columns-inner .left-column .link-detail ul li a.pdflink:before {
  content: '';
  background: url(../images/useful/pdf.svg) left center / 100% no-repeat;
  width: 22px;
  height: 26px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

#useful .content .content-columns .columns-inner .left-column .link-detail ul li a.blanklink:before {
  content: '';
  background: url(../images/useful/link-black.svg) left center / 100% no-repeat;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

/* テキスト */
#useful .content .content-columns .columns-inner .left-column .link-detail ul li a span {
  display: block;
  position: relative;
  padding-right: 60px;
}

/* 横線 */
#useful .content .content-columns .columns-inner .left-column .link-detail ul li a span:before {
  content: '';
  position: absolute;
  right: 13px;
  bottom: 0.55em;
  width: 40px;
  height: 1px;
  background: #000;

  transform-origin: right center; /* 右端基準 */
  transform: scaleX(1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* hoverで少し短く */
#useful .content .content-columns .columns-inner .left-column .link-detail ul li a:hover span:before {
  transform: scaleX(0.7);
}

/* 矢印 */
#useful .content .content-columns .columns-inner .left-column .link-detail ul li a span:after {
  content: '';
  position: absolute;
  right: 6px;
  bottom: calc(0.6em - 4px);
  width: 4px;
  height: 8px;
  background: url(../images/common/arrow.svg) no-repeat center / contain;

  will-change: transform;
  transform: translateZ(0);
}

/* ============================
   SNS
============================ */
#useful .sns-dtail {
  max-width: 1160px;
  width: 90%;
  margin: 90px auto 70px;
  padding-bottom: 70px;
  border-bottom: 1px solid #000;
}

#useful .sns-dtail .sns-title {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}

#useful .sns-dtail .snsicons_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#useful .sns-dtail .snsicons_list a {
  width: 50px;
  margin-right: 40px;
}

#useful .sns-dtail .snsicons_list a:last-child {
  margin-right: 0;
}

/* ============================
   recomend
============================ */
#useful .recomend {
  max-width: 1160px;
  width: 90%;
  margin: 0 auto 70px;
}

#useful .recomend .recomend-en {
  width: 40%;
  margin: 0 auto 0;
}

#useful .recomend .recomend-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.875rem;
  font-weight: 400;
  text-align: center;
  margin: -25px auto 50px;
}

#useful .recomend .recomend-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#useful .recomend .recomend-list ul li {
  width: 21%;
  margin-right: 3%;
}

#useful .recomend .recomend-list ul li:last-child {
  margin-right: 0;
}

#useful .recomend .recomend-list ul li .img-box {
  overflow: hidden;
  margin-bottom: 15px;
}

#useful .recomend .recomend-list ul li .img-box img {
  transition: 0.5s;
}

#useful .recomend .recomend-list ul li .category-en {
  font-family: 'Ropa Sans', sans-serif;
  font-size: 0.8125rem;
  color: #fff;
  padding: 2px 25px;
  width: fit-content;
  margin-bottom: 20px;
}

#useful .recomend .recomend-list ul li .category-en.work {
  background: #41bba7;
}
#useful .recomend .recomend-list ul li .category-en.event {
  background: #00b4ff;
}
#useful .recomend .recomend-list ul li .category-en.student {
  background: #00b4ff;
}
#useful .recomend .recomend-list ul li .category-en.know-how {
  background: #8278ff;
}
#useful .recomend .recomend-list ul li .category-en.release {
  background: #ff5e7a;
}
#useful .recomend .recomend-list ul li .category-en.other {
  background: #aaaaa0;
}

#useful .recomend .recomend-list ul li .recomend-txt {
  font-size: 1.0625rem;
  font-weight: bold;
  margin-bottom: 13px;
}

#useful .recomend .recomend-list ul li .recomend-tags {
  font-size: 0.75rem;
  margin-bottom: 13px;
}

#useful .recomend .recomend-list ul li .recomend-date {
  font-size: 0.75rem;
  color: #969696;
  text-align: right;
}

#useful .recomend .recomend-link {
  width: 235px;
  display: block;
  position: relative;
  transition: 0.3s;
  margin: 40px auto 12px;
}

#useful .recomend .recomend-link:before {
  content: '';
  display: block;
  background: #41bba7;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -12px;
  margin: auto;
}

#useful .recomend .recomend-link:after {
  content: '';
  background: #000;
  width: 0;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -12px;
  transition: 0.3s;
  z-index: 2;
}

#useful .recomend .recomend-link span {
  width: 100%;
  display: block;
  background: url(../images/common/arrow.svg) right center / 4px 8px no-repeat;
  position: relative;
}

#useful .recomend .recomend-link span:before {
  content: '';
  display: block;
  background: #000;
  width: 40px;
  height: 1px;
  position: absolute;
  top: 50%;
  right: 10px;
  bottom: 0;
  transition: 0.3s;
}

@media only screen and (min-width: 960px) {
  #useful .content .content-columns .columns-inner .left-column .event-detail .txt-box .txt-box-link:hover:after,
  #useful .recomend .recomend-link:hover:after,
  #useful .content .content-columns .columns-inner .left-column .txt .txtlink-blank:hover:after,
  #useful .content .content-columns .columns-inner .left-column .txt .txtlink-pdf:hover:after {
    width: 100%;
  }

  #useful .content .content-columns .columns-inner .left-column .event-detail .txt-box .txt-box-link:hover span:before,
  #useful .content .content-columns .columns-inner .left-column .link-detail ul li a:hover span:before,
  #useful .recomend .recomend-link:hover span:after {
    width: 30px;
  }

  #useful .content .content-columns .columns-inner .left-column .link-detail ul li a:hover {
    background: #e6e6e6;
  }

  #useful .sns-dtail .snsicons_list a:hover {
    opacity: 0.7;
  }

  #useful .recomend .recomend-list ul li a:hover .img-box img {
    transform: scale(1.1);
  }
}

@media only screen and (max-width: 960px) {
  #useful .right-column {
    padding-top: 80px;
  }

  #useful .content:before {
    height: 800px;
  }

  #useful .recomend .recomend-list ul li .recomend-txt {
    font-size: 0.9375rem;
  }
}

@media only screen and (max-width: 600px) {
  #useful .right-column {
    padding-top: 70px;
    margin-bottom: 50px;
  }

  #useful .detail .detail-tags {
    margin-bottom: 30px;
  }

  #useful .detail .title {
    font-size: 1.75rem;
    margin-bottom: 20px;
  }

  #useful .content .content-columns .columns-inner .left-column .columns-img2 .img {
    width: 100%;
  }

  #useful .content .content-columns .columns-inner .left-column .columns-img2 .img .caption {
    margin-top: 5px;
    margin-bottom: 20px;
  }

  #useful .content .content-columns .columns-inner .left-column .movie {
    margin-bottom: 40px;
  }

  #useful .content .content-columns .columns-inner .left-column .event-detail .img-box,
  #useful .content .content-columns .columns-inner .left-column .event-detail .txt-box,
  #useful .content .content-columns .columns-inner .left-column .event-detail .txt-box .txt-box-link {
    width: 100%;
  }

  #useful .content .content-columns .columns-inner .left-column .event-detail .img-box {
    margin-bottom: 15px;
  }

  #useful .content .content-columns .columns-inner .left-column .event-detail {
    display: block;
    padding: 20px;
    margin-bottom: 40px;
  }

  #useful .content .content-columns .columns-inner .left-column .event-detail .txt-box .txt-box-title,
  #useful .content .content-columns .columns-inner .left-column .summary .summary-inner .summary-title {
    font-size: 1.25rem;
  }

  #useful .content .content-columns .columns-inner .left-column .summary .summary-inner {
    margin-bottom: 30px;
  }

  #useful .content .content-columns .columns-inner .left-column .columns-img2 {
    display: block;
  }

  #useful .recomend .recomend-list ul li {
    width: calc((100% - 4%) / 2);
    margin-right: 4%;
    margin-bottom: 30px;
  }

  #useful .recomend .recomend-list ul li:nth-child(even) {
    margin-right: 0;
  }

  #useful .recomend .recomend-list ul li:nth-last-child(-n + 2) {
    margin-bottom: 0;
  }

  #useful .recomend .recomend-list ul li .img-box {
    margin-bottom: 10px;
  }

  #useful .recomend .recomend-list ul li .category-en {
    font-size: 0.7rem;
    padding: 0 25px;
    margin-bottom: 10px;
  }

  #useful .recomend .recomend-list ul li .recomend-txt {
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
    line-height: 1.5;
    margin-bottom: 8px;
  }

  #useful .recomend .recomend-list ul li .recomend-tags {
    font-size: 0.7rem;
    line-height: 1.6;
    margin-bottom: 8px;
  }

  #useful .recomend .recomend-list ul li .recomend-date {
    font-size: 0.7rem;
  }

  /* 横線 */
  #useful .content .content-columns .columns-inner .left-column .link-detail ul li a span:before {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) scaleX(1);
  }

  /* 矢印 */
  #useful .content .content-columns .columns-inner .left-column .link-detail ul li a span:after {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

@media only screen and (max-width: 480px) {
  #useful .right-column {
    padding-top: 10px;
  }

  #useful .midashi .txt {
    font-size: 1.3rem;
  }
}