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

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

   コンテンツ
 
=================================================================================== */

html {
  min-width: 960px;
  overflow-x: auto;
}

html > body {
  min-width: 960px;
  position: relative;
}


/* ============================
   メインビジュアル（重ねタイプ）
============================ */

/* ===== grid ===== */
#useful .hero-grid {
	display: flex;
  flex-wrap: wrap;
	padding-top: 60px;
	padding-bottom: 120px;
}

/* ===== カード本体（比率固定） ===== */
#useful .hero-grid li {
  width: calc(100% / 3);
  position: relative;
  cursor: pointer;
}

#useful .hero-item {
  position: relative;              /* ← 追加 */
  aspect-ratio: 5 / 3;             /* ← 追加（好きに変更OK） */
  overflow: hidden;
  /*transition: transform 0.3s ease, box-shadow 0.3s ease;*/
}

/* ===== 背景画像 ===== */
/* 画像にアニメーションをつける */
#useful .hero-item img {
  position: absolute;              /* ← 変更 */
  inset: 0;                        /* ← 追加 */
  width: 100%;
  height: 100%;                    /* ← 追加 */
  object-fit: cover;               /* ← 追加（超重要） */
  transition: transform 0.6s ease;
}

/* hover時に画像だけ拡大 */
#useful .hero-item:hover img,
#useful .article-item:hover .thumb img {
  transform: scale(1.08);
}


/* ===== グラデーション ===== */
#useful .hero-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.25),
    rgba(0,0,0,0)
  );
  /*z-index: 1;*/
}

/* ===== テキストレイヤー ===== */
#useful .hero-content {
	position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                 /* ← 変更 */
	z-index: 2;
	padding: 40px 40px 20px;  /* ← 下に余白追加 */
	color: #fff;
	box-sizing: border-box;
}
/* ===============================
   CATEGORY COLORS
================================ */

/* Work */
#useful .cat-work .dot,
#useful .category.cat-work,
#useful .cat-work:hover a {
  background: #41BBA7;
  border-color: #41BBA7;
}

/* Event */
#useful .cat-event .dot,
#useful .category.cat-event,
#useful .cat-event:hover a {
  background: #FFAA00;
  border-color: #FFAA00;
}

/* Student */
#useful .cat-student .dot,
#useful .category.cat-student,
#useful .cat-student:hover a {
  background: #00B4FF;
  border-color: #00B4FF;
}

/* Knowhow */
#useful .cat-knowhow .dot,
#useful .category.cat-knowhow,
#useful .cat-knowhow:hover a {
  background: #8278FF;
  border-color: #8278FF;
}

/* Release */
#useful .cat-release .dot,
#useful .category.cat-release,
#useful .cat-release:hover a {
  background: #FF5E7A;
  border-color: #FF5E7A;
}

/* Other */
#useful .cat-other .dot,
#useful .category.cat-other,
#useful .cat-other:hover a {
  background: #AAAAA0;
  border-color: #AAAAA0;
}

/* ===============================
   お役立ちタイトル
================================ */
#useful .section-header {
  max-width: 1160px;
  width: 90%;
  margin: 0 auto;
}


#useful .section-header-inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 90px;
}

/* ---- 見出し本体 ---- */

#useful .section-header h2 {
  position: relative;
  margin: 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 2.25rem; /* 36px */
  font-weight: 400;
  line-height: 1.3;
  text-shadow: #fff 2px 2px 0px, #fff 0 0 10px;
}

/* ---- 英字（useful） ---- */

#useful .section-header h2 small {
  position: absolute;
  top: -18px;
  left: 0;
  font-family: 'Ropa Sans', sans-serif;
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- 説明文 ---- */

#useful .section-header p {
  max-width: 680px;
  margin: 0;
  line-height: 1.8;
}

/* ===== テキストスタイル ===== */

#useful .hero-content .category {
	font-family: 'Ropa Sans', sans-serif;
	width: 100px;
	aspect-ratio: 100 / 23;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: clamp(0.625rem, 0.9vw, 0.8125rem); /* 10px, 13px */
	font-weight: 500;
	margin-bottom: 10px;
}

#useful .hero-content .title {
	font-size: clamp(1rem, 1.2vw, 1.25rem); /* 16px, 20px */
	font-weight: bold;
	margin-bottom: 8px;
	line-height: 1.5;
	width: 100%;

    display: -webkit-box;
    -webkit-line-clamp: 2;   /* ← 2行まで */
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
}

#useful .hero-content .tags {
  font-size: clamp(0.75rem, 0.9vw, 0.875rem); /* 12px, 14px */
  opacity: 0.9;
}

/* ===== 「新着記事」タイトル（背景英字） ===== */
#useful .section-title {
  position: relative;
  margin-bottom: 50px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ddd;
}

#useful .section-title h3 {
	position: relative;
	z-index: 1;
	font-family: 'Noto Serif JP', serif;
	font-size: 1.75rem; /* 28px */
	font-weight: 400;
	margin: 0;
	letter-spacing: 0.05em;
	/*cursor: pointer;*/
}

/* 背景英字 */
#useful .section-title::before {
	content: "";
	position: absolute;
	top: -28px;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 480 / 50;
	background: url("../images/useful/new-articles.svg") no-repeat;
	background-size: contain;
	z-index: 0;
}

/* ============================
   2カラムレイアウト
============================ */

#useful .content-columns {
  max-width: 1160px;
  width: 90%;
  margin: 0 auto;
  padding: 80px 0;
}

#useful .columns-inner {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-between;
}

#useful .left-column {
    width: 66%;
    flex: none;
}

#useful .right-column {
  width: 260px;
}

/* ===============================
   ARTICLE LIST
================================ */

#useful .article-list {
  display: flex;
  flex-direction: column;
  gap: 40px; /* 記事間余白（線なし） */
}

/* ---- 各記事 ---- */

#useful .article-item a {
  display: flex;
  gap: 30px;
  cursor: pointer;
}

/* ---- 画像 ---- */

#useful .thumb {
  width: 41%;
  aspect-ratio: 316 / 204;
  overflow: hidden;
  flex-shrink: 0;
}

#useful .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* ---- 右側テキストエリア ---- */

#useful .article-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 24px; /* dateの余白確保 */
}

/* 中央に配置したい部分を包む */
#useful .article-main {
  margin-top: auto;
  margin-bottom: auto;
}

/* ---- カテゴリ枠（100×23） ---- */

#useful .category {
  font-family: 'Ropa Sans', sans-serif;
  width: 100px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem; /* 12px */
  color: #fff;
  margin-bottom: 10px;
}

/* ---- タイトル ---- */

#useful .article-title {
	font-size: 1.125rem; /* 18px */
	font-weight: 600;
	margin: 0 0 10px;
	line-height: 1.6;
	text-align: justify;
	width: 100%;

	display: -webkit-box;
	-webkit-line-clamp: 2;   /* ← 2行まで */
	-webkit-box-orient: vertical;

	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- タグ＆日付 ---- */

#useful .meta-bottom {
	display: flex;
	align-items: center;
}

#useful .tags {
	font-size: 0.8125rem; /* 13px */
	opacity: 0.8;
	font-weight:600;
	margin-bottom: 10px;
}

/* dateを下から24px固定 */
#useful .date {
	right: 0;
	font-size: 0.8125rem; /* 13px */
	color: #969696;
	font-weight: 600;
	text-align: right;
}

/* ============================
  一覧へ
============================ */
#useful .c-btn01 {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-top: 60px;
  font-family: sans-serif;
}
/* ============================
  ページ送り
============================ */
#useful .wp-pagenavi {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-top: 60px;
  font-family: sans-serif;
}

/* ページ番号 */
#useful .wp-pagenavi .page,
#useful .wp-pagenavi .current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #000;
  text-decoration: none;
  color: #000;
  font-size: 14px;
  transition: all 0.2s ease;
}

#useful .wp-pagenavi .current {
  background: #000;
  color: #fff;
  font-weight: bold;
}

/* … 表示 */
#useful .wp-pagenavi .extend {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0 4px;
  position: relative;
  top: -12px;
}

/* ============================
  前後ボタン（SVG背景）
============================ */

/* « » を非表示 */
#useful .wp-pagenavi .previouspostslink,
#useful .wp-pagenavi .nextpostslink {
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background-color: #000;
	border-radius: 50%;
	transition: all 0.2s ease;
}

/* 前矢印 */
#useful .wp-pagenavi .previouspostslink {
  background-image: url(../images/useful/left-arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 4px;
  margin-right: 10px;
}

/* 次矢印 */
#useful .wp-pagenavi .nextpostslink {
  background-image: url(../images/useful/light-arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 4px;
  margin-left: 10px;
}

/* ホバー */
#useful .wp-pagenavi a:hover {
  transform: translateY(-2px);
}


/* ============================
右カラム（罫線高さから開始）
============================ */

#useful .right-column {
  padding-top: 70px; /* ←ここで罫線高さと揃える */
  width: 260px;
}

/* -------------------------
   CATEGORY BOX
-------------------------- */

/* ===============================
   CATEGORY TITLE（画像）
================================ */
#useful .category-title {
  margin: 0 0 28px;
}

#useful .category-title img {
  display: block;
  width: 100%;
  max-width: 180px; /* 好みで */
  height: auto;
}

/* ===============================
   CATEGORY LIST
================================ */

#useful .category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#useful .category-list li {
  width: 244px;
  
  margin-bottom: 14px;
}

/* ---- ボックス ---- */

#useful .category-list a {
  width: 244px;
  display: block;
  padding: 12px 20px;
  background: #fff;
border: 1px solid #ddd;
  text-decoration: none;
  color: #000;

  transition:
    background .3s ease,
    border-color .3s ease,
    transform .3s ease;
}

/* ---- 英語行 ---- */

#useful .cat-en {
	font-family: 'Ropa Sans', sans-serif;
	display: flex;
	align-items: center;
	font-size: 1.125rem; /* 18px */
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* ---- ドット（直径9px / 6.5px余白）---- */

#useful .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6.5px;
}

/* ---- 日本語行（英字頭に揃える）---- */

#useful .cat-ja {
  font-size: 0.75rem; /* 12px */
  font-weight: 400;
  margin-left: 15.5px; /* 9px + 6.5px */
}


/* ===============================
   HOVER（カテゴリ色で塗り）
================================ */

/* 文字とドット反転 */

#useful .category-list li:hover .cat-en {
  color: #fff;
}

#useful .category-list li:hover .cat-ja {
  color: rgba(255,255,255,0.8);
}

#useful .category-list li:hover .dot {
  background: #fff;
}

/* ===============================
   タグエリア
================================ */
#useful .tag-area {
  margin-top: 45px;
}

/* タイトル画像 */
#useful .tag-title {
  margin-bottom: 20px;
}

#useful .tag-title img {
  display: block;
  width: 100%;
  max-width: 80px;
  height: auto;
}

/* タグ一覧 */
#useful .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 17px; /* ← 指定どおり */
}

/* 文字だけタグ */
#useful .tag-list a {
	font-size: 0.75rem; /* 12px */
	font-weight: 600;
	text-decoration: none;
	color: #000;
	transition: 0.3s;
	padding: 0;          /* ← 余白削除 */
	background: none;    /* ← 囲み削除 */
	border-radius: 0;    /* ← 丸削除 */
}

/* ホバー */
#useful .tag-list a:hover {
  opacity: 0.6;
}

/* カテゴリTOPへのボタン */
#useful .recomend-link {
  width: 235px;
  display: block;
  position: relative;
  transition: .3s;
  margin:40px auto 12px;
}

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

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

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

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

#useful .recomend-link:hover:after {
        width: 100%;
    }




/* ===============================
   tab対応
================================ */
@media (max-width: 960px) {


  /* ===============================
     お役立ちタイトル
  ================================ */

  #useful .section-header-inner {
    display: block;
  }

  #useful .section-header h2 {
    margin-bottom: 20px;
  }

  #useful .content-columns {
    padding: 0 0;
  }

  #useful .left-column,
  #useful .right-column {
    width: 100%;
  }

  #useful .right-column {
    padding-top: 0;
    margin-bottom: 80px;
  }

  #useful .category-area {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  #useful .category-area .category-list {
    display: flex;
  }

  #useful .category-list li {
    margin: 0 8px 0 0;
  }

}





/* ===============================
   sp対応
================================ */
@media (max-width: 600px) {

  html {
    min-width: auto;
    overflow-x: hidden;
  }

  html > body {
    min-width: auto;
  }

  /* ============================
     メインビジュアル（重ねタイプ）
  ============================ */

  #useful .hero-grid {
    display: block;
    padding-bottom: 80px;
  }

  #useful .hero-grid li {
    width: 100%;
  }

  #useful .hero-content {
    bottom: 30px;
    padding: 30px 30px 0;
  }

  /* ===============================
     お役立ちタイトル
  ================================ */

  #useful .section-header-inner {
    margin-bottom: 60px;
  }

  #useful .section-header h2 {
    font-size: 2.8em;
  }

  #useful .section-header h2 small {
    font-size: 35%;
  }

  /* ===============================
     CATEGORY LIST
  ================================ */

  #useful .category-list li {
    width: 210px;
  }

  #useful .category-list a {
    width: 210px;
  }

  /* ===============================
     ARTICLE LIST
  ================================ */

  #useful .article-list {
      gap: 50px;
  }

  #useful .article-item a {
      display: block;
  }

  #useful .thumb {
    width: 100%;
    margin-bottom: 20px;
  }

  #useful .date {
    bottom: auto;
    right: 0;
  }

}





/* ===============================
   480px以下
================================ */
@media (max-width: 480px) {

  #useful .hero-grid {
     padding-top: 0; 
  }

}