@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap);

:root {
  /* --color-main: #97F4A4; */
  --color-main: #4f8bc2;
  /* 79, 139, 194 */
  --color-main-light: color-mod(var(--color-main) tint(15%));
  --color-main-dark: color-mod(var(--color-main) shade(15%));
  --color-main-bg: color-mod(var(--color-main) alpha(20%));

  --color-sub1: #8546f8;
  --color-sub1-light: color-mod(var(--color-sub1) tint(15%));
  --color-sub1-dark: color-mod(var(--color-sub1) shade(15%));
  --color-sub1-bg: color-mod(var(--color-sub1) alpha(20%));

  --color-sub2: #f0784d;
  --color-sub2-light: color-mod(var(--color-sub2) tint(15%));
  --color-sub2-dark: color-mod(var(--color-sub2) shade(15%));
  --color-sub2-bg: color-mod(var(--color-sub2) alpha(20%));

  --gray-7: #777777;
}

/*全体の設定*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* background-color: #ffffff; */
  background:
    radial-gradient(
      900px 520px at 12% 12%,
      rgba(255, 217, 61, 0.22),
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      900px 520px at 92% 20%,
      rgba(255, 77, 157, 0.16),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      900px 520px at 55% 95%,
      rgba(0, 209, 178, 0.14),
      rgba(255, 255, 255, 0) 65%
    ),
    linear-gradient(180deg, var(--pop-bg-b), var(--pop-bg-a));
  font-family: "Noto Sans JP", sans-serif;
}

@font-face {
  font-family: "Fredoka-Medium.ttf";
  src: url("../font/Fredoka-Medium.ttf");
}

.main {
  padding-top: 40px;
  display: block;
  z-index: 10;
  position: relative;
  text-align: center;
}

.main .artilce_title {
  font-family: "Fredoka-Medium", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 24px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #363636;
  width: 80%;
}
.main .artilce_date {
  font-weight: 700;
  font-size: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #363636;
}

p {
  /* font-family: "font-article"; */
  font-weight: 500;
  margin: 10px 0px 0px 0px;
  font-size: 16px;
  /* text-align: center; */
  margin-left: auto;
  margin-right: auto;
  width: 60%;

  color: #363636;
}

a {
  /* font-family: "font-article"; */
  font-weight: 500;
  color: var(--gray-7);
  margin: 10px 0px 0px 0px;
  font-size: 16px;
  text-align: center;
  /* margin-left: auto;
  margin-right: auto; */
  width: 60%;
}

a:hover {
  color: var(--color-sub2);
}

.green_line {
  margin: 20px auto 0;
  border: solid 2px var(--color-main);
  width: 80%;
  text-align: center;
  /* border-top: solid 1px red;
	border-bottom: solid 1px red; */
  /* height:10px; */
}

.green_line_top {
  margin-top: 60px;
  margin-bottom: -20px;
  margin-left: auto;
  margin-right: auto;
  border: solid 2px var(--color-main);
  width: 80%;
  text-align: center;
}

.orange_line {
  margin: 40px auto 0;
  border: solid 2px var(--color-sub2);
  width: 80%;
  text-align: center;
  /* border-top: solid 1px red;
border-bottom: solid 1px red; */
  /* height:10px; */
}

.foot2 {
  margin-top: 100px;
  margin-bottom: 100px;
  display: block;
  position: relative;
  text-align: center;
}

.green_line_foot {
  margin: 20px auto 0;
  border: solid 2px var(--color-main);
  width: 80%;
  text-align: center;
  /* border-top: solid 1px red;
	border-bottom: solid 1px red; */
  /* height:10px; */
}

img {
  width: 60%;
  /* height: 150px; */
  /* object-fit: cover; */
  /* text-align: center; */
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin: 40px auto 0;
  border-radius: 4px;
}

.article_text {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  width: 920px;
}

.space {
  height: 8vh;
}

.space_high {
  height: 50vh;
}

/* header関係　ここから */
.header {
  height: 40px;
  width: 100%;
  /* padding: 15px 0; */
  /* background-color: #97F4A4; */
  /* background-color: #DDDDDD; */
  background: rgba(255, 255, 255, 0.82);
  color: var(--gray-7);

  /* float: right; */

  position: fixed;
  top: 0;
  z-index: 200;
}

/* .header .headline {
    line-height: 40px;
    float: right;
    font-size: 30px;
    margin-left: 100px;
} */

.footer {
  height: 40px;
  width: 100%;
  /* background-color: #DDDDDD; */
  background: rgba(255, 255, 255, 0.82);
  color: var(--gray-7);
  /* position: fixed; */
  /* top: 0;
  z-index: 100; */
  position: sticky;
  top: 100vh;
  bottom: 0;
}

.nav-list {
  line-height: 20px;
  float: right;
  margin-right: 30px;
  list-style: none;
}

.nav-list-item {
  list-style: none;
  display: inline-block;
  margin: 10px 8px;
}

.nav-list li a {
  /*線の基点とするためrelativeを指定*/
  position: relative;
  text-decoration: none;
  /* font-family: 'Fredoka-Medium.ttf'; */
  font-weight: 700;
  color: var(--gray-7);
}

.nav-list li.current a,
.nav-list li a:hover {
  color: var(--color-sub2);
}

.nav-list li a::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: -10%;
  /*線の形状*/
  width: 120%;
  height: 2px;
  background: var(--color-sub2);
  /*アニメーションの指定*/
  transition: all 0.3s;
  transform: scale(0, 1);
  /*X方向0、Y方向1*/
  transform-origin: center top;
  /*上部中央基点*/
}

/*現在地とhoverの設定*/
.nav-list li.current a::after,
.nav-list li a:hover::after {
  transform: scale(1, 1);
  /*X方向にスケール拡大*/
}

/* header関係　ここまで */

/* スマホ　767px以下 */
/* @media only screen and (max-width: 1280px) { */
/* @media (orientation: portrait) and (max-width: 1280px){

  p {
    width: 80%;
    font-size: 20px;
  }

  a {
    font-size: 20px;
  }
  
  img {
    width: 80%;
  }

  .fit-picture {
    flex-direction: column;
  }

  .header {
    overflow-x: scroll;
    height: 64px;
  }
  .header::-webkit-scrollbar {
    display: none;
  }
  .nav-list {
    line-height: 40px;
  }
  .header .nav-list ul {
    width: max-content;    
  }
  .nav-list li a {
    font-size: 32px;
    margin-right: 12px;
  }

  body{
    min-height: calc(100vh - 84px);
  }

} */

/* pc　768px以上 */
/* @media only screen and (min-width: 1280px),
print {

  p {
    width: 60%;
  }

  img {
    width: 60%;
  }

} */

.background {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 1;
}

.fit-picture {
  width: 80%;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 150px; */
  /* object-fit: cover; */
  border-radius: 4px;

  margin-left: auto;
  margin-right: auto;
  margin: 10px auto 0;
}

.fit-picture img {
  width: 98%;
  height: 550px;
  object-fit: cover;

  /* transition-duration: 0.5s; */
}

/* .fit-picture img:hover{
  transform: scale(1.2) rotate(9deg);
  transition-duration: 0.5s;
} */

.main img {
  /* position:relative;
  overflow: hidden; */
  transition-duration: 0.5s;
}

.main img:hover {
  transform: scale(1.05) rotate(-0.3deg);
  transition-duration: 0.5s;
}

/* =======================================================================
   POP collage layout for .fit-picture (multiple images)
   - 横並び（wrap）を復活
   - 「ランダムっぽい」大きさ＆Xずらし（CSSのみ / nth-childパターン）
   ======================================================================= */

.fit-picture {
  width: min(96%, 1180px);
  margin: 14px auto 0;
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}

/* 各アイテム：幅（basis）とXずらしを変数で管理 */
.fit-picture > div {
  flex: 0 1 var(--basis, 46%);
  max-width: var(--basis, 46%);
  min-width: 320px; /* 小さくなりすぎ防止 */
  transform: translateX(var(--tx, 0));
}

/* ポラロイド枠：大きさは親divのbasisに追従 */
.fit-picture a {
  display: block;
  background: #fff;
  border-radius: 18px;
  padding: 8px; /* 余白を少し減らして画像面積UP */
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  will-change: transform;
  transform: rotate(var(--rot, -1.2deg));
  transition: transform 0.18s ease;
}
.fit-picture a:hover {
  transform: translate3d(0, -6px, 0) rotate(0deg);
}

/* 画像：固定高さをやめ、カードの形（aspect-ratio）でコラージュ感 */
.fit-picture img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--ar, 4/3);
  object-fit: cover;
  border-radius: 14px;
  margin: 0 !important;
  transition: none !important; /* img:hoverの拡大回転を無効化 */
}
.fit-picture img:hover {
  transform: none !important;
}

/* スマホ：1列（読みやすさ優先） */
/* @media (max-width: 820px){
  .fit-picture{
    width: min(92%, 980px);
    flex-direction: column !important;
    gap: 14px;
  }
  .fit-picture > div{
    max-width: 100%;
    flex-basis: 100%;
    min-width: 0;
    transform: none;
  }
  .fit-picture a{ transform: none; }
} */

/* ===== 画像をもう少し大きく（横並び維持） ===== */
.fit-picture {
  width: min(98%, 1320px); /* 全体の最大幅を拡大 */
}

.fit-picture > div {
  /* 小さくなりすぎ防止（必要なら320でもOK） */
  min-width: 320px;
}

/* --- ランダム風パターン（並び順で変化） --- */
/* .fit-picture > div:nth-child(6n+1){ --basis: 48%; --tx: -10px; --rot: -1.6deg; --ar: 4/3; }
.fit-picture > div:nth-child(6n+2){ --basis: 42%; --tx:  14px; --rot:  1.2deg; --ar: 1/1; }
.fit-picture > div:nth-child(6n+3){ --basis: 46%; --tx:   6px; --rot: -0.8deg; --ar: 16/10; }
.fit-picture > div:nth-child(6n+4){ --basis: 40%; --tx: -14px; --rot:  1.5deg; --ar: 3/4; }
.fit-picture > div:nth-child(6n+5){ --basis: 44%; --tx:  10px; --rot: -1.1deg; --ar: 5/4; }
.fit-picture > div:nth-child(6n  ){ --basis: 47%; --tx:  -6px; --rot:  0.9deg; --ar: 7/5; } */

/* “ランダム風”のサイズを全体的に大きめに */
.fit-picture > div:nth-child(6n + 1) {
  --basis: 100%;
  --tx: 15vw;
  --rot: -1.6deg;
  --ar: 16/9;
}
.fit-picture > div:nth-child(6n + 2) {
  --basis: 39%;
  --tx: 12vw;
  --rot: 1.2deg;
  --ar: 1/1;
}
.fit-picture > div:nth-child(6n + 3) {
  --basis: 39%;
  --tx: 1vw;
  --rot: -0.8deg;
  --ar: 16/10;
}
.fit-picture > div:nth-child(6n + 4) {
  --basis: 76%;
  --tx: 7vw;
  --rot: 1.5deg;
  --ar: 2/1;
}
.fit-picture > div:nth-child(6n + 5) {
  --basis: 39%;
  --tx: 9vw;
  --rot: -1.1deg;
  --ar: 5/4;
}
.fit-picture > div:nth-child(6n) {
  --basis: 39%;
  --tx: -1vw;
  --rot: 0.9deg;
  --ar: 7/5;
}

/* 画像面積を少し増やす（枠の余白を減らす） */
.fit-picture a {
  padding: 6px;
}

/* =======================================================================
   POP NEWS ARTICLE (restore pop feel, CSS-only)
   - ヘッダー(.header / .nav-list) は一切触らない
   - body背景 / 本文カード / タイトルマーカー / 区切り線 / 文章幅 を「昼ポップ」に寄せる
   ======================================================================= */

/* ふんわりカラフル背景（ページ全体） */
body {
  background:
    radial-gradient(
      900px 520px at 12% 10%,
      rgba(255, 217, 61, 0.22),
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      900px 560px at 88% 16%,
      rgba(255, 77, 157, 0.18),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      900px 560px at 50% 110%,
      rgba(0, 209, 178, 0.16),
      rgba(255, 255, 255, 0) 65%
    ),
    #ffffff;
}

/* 背景canvasがある場合は固定背景に（チラつき/ズレ抑制） */
#fireflyCanvas {
  position: fixed !important;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
}

/* 本文をカード化（ヘッダーは変更しない） */
.main {
  position: relative;
  z-index: 10;
  text-align: center;

  /* max-width: 1120px; */
  width: 80%;
  margin: 86px auto 56px; /* fixed header(40px)の下 */
  padding: 22px 18px 34px;

  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* カード内の淡いブロブ */
.main::before {
  content: "";
  position: absolute;
  inset: -80px;
  background:
    radial-gradient(
      420px 260px at 16% 18%,
      rgba(255, 217, 61, 0.18),
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      460px 280px at 88% 12%,
      rgba(255, 77, 157, 0.14),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      520px 320px at 52% 112%,
      rgba(0, 209, 178, 0.12),
      rgba(255, 255, 255, 0) 65%
    );
  pointer-events: none;
  z-index: 0;
}

/* ステッカー（デフォルト） */
.main::after {
  content: "NEWS ✨";
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 217, 61, 0.92);
  color: #1f1f1f;
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  transform: rotate(-3deg);
  pointer-events: none;
  z-index: 1;
}
/* 記事ごとに変えたいときだけ：<div class="main" data-sticker="SEMINAR 🎓"> */
.main[data-sticker]::after {
  content: attr(data-sticker);
}

/* カード内要素は前面に */
.main > * {
  position: relative;
  z-index: 2;
}

/* タイトル：幅いっぱい(80%)を解除して「文字幅＋少し余白」に */
.main .artilce_title {
  display: inline-block !important;
  width: auto !important; /* width:80% を無効化 */
  max-width: 92%;
  padding: 0 0.25em; /* ここで下線の左右余白を作る */
  margin-top: 34px; /* ステッカー分 */
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 28px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #1f1f1f;
}

/* マーカー下線：テキスト幅に追従（はみ出し無し） */
.main .artilce_title::before {
  content: "";
  position: absolute;
  left: 0 !important;
  right: 0 !important;
  bottom: 1px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 217, 61, 0.55),
    rgba(255, 77, 157, 0.35),
    rgba(0, 209, 178, 0.35)
  );
  z-index: -1;
  transform: rotate(-0.1deg);
}

/* 日付：ピル型 */
.main .artilce_date {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 15px;
  color: #1f1f1f;
  background: rgba(0, 0, 0, 0.06);
}

/* 区切り線：硬いborderをやめて柔らかグラデ線に */
.green_line,
.green_line_top {
  border: none !important;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(79, 139, 194, 0),
    rgba(79, 139, 194, 0.85),
    rgba(79, 139, 194, 0)
  );
  width: min(92%, 960px) !important;
}
.green_line_top {
  margin-top: 12px;
  margin-bottom: 10px;
}
.green_line {
  margin-top: 18px;
}

/* 本文：読みやすい幅に（既存の width:920px や p width:60% を上書き） */
.article_text {
  width: min(92%, 760px) !important;
  margin: 0 auto !important;
  text-align: left !important;
}
.article_text p {
  width: 100% !important;
  font-size: 20px;
  line-height: 1.9;
  margin: 12px 0 0 0;
  color: #1f1f1f;
}

/* 本文リンク：ちょいポップ */
.article_text a {
  width: auto !important;
  color: #1f1f1f;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 77, 157, 0.45);
}
.article_text a:hover {
  text-decoration-color: rgba(0, 209, 178, 0.55);
}

/* 単体画像（fit-picture以外）も少しリッチに */
.main > img {
  width: min(92%, 980px) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

@media (orientation: portrait) and (max-width: 1280px) {
  p {
    width: 80%;
    font-size: 20px;
  }

  a {
    font-size: 20px;
  }

  img {
    width: 80%;
  }

  .fit-picture {
    flex-direction: column;
  }

  .header {
    overflow-x: scroll;
    height: 64px;
  }
  .header::-webkit-scrollbar {
    display: none;
  }
  .nav-list {
    line-height: 40px;
  }
  .header .nav-list ul {
    width: max-content;
  }
  .nav-list li a {
    font-size: 32px;
    margin-right: 12px;
  }

  body {
    min-height: calc(100vh - 84px);
  }

  .article_text {
    width: min(92%, 760px) !important;
  }
  .article_text p {
    font-size: 28px;
    /* line-height: 1.9 !important;  */
  }

  .main::after {
    font-size: 28px;
  }

  .fit-picture > div:nth-child(6n + 1) {
    --basis: 100%;
    --tx: 15vw;
    --rot: -1.6deg;
    --ar: 16/9;
  }
  .fit-picture > div:nth-child(6n + 2) {
    --basis: 92%;
    --tx: 12vw;
    --rot: 1.2deg;
    --ar: 5/3;
  }
  .fit-picture > div:nth-child(6n + 3) {
    --basis: 96%;
    --tx: 8vw;
    --rot: -0.8deg;
    --ar: 16/7;
  }
  .fit-picture > div:nth-child(6n + 4) {
    --basis: 39%;
    --tx: 10vw;
    --rot: -1.5deg;
    --ar: 4/3;
  }
  .fit-picture > div:nth-child(6n + 5) {
    --basis: 39%;
    --tx: 9vw;
    --rot: -1.8deg;
    --ar: 5/4;
  }
  .fit-picture > div:nth-child(6n) {
    --basis: 39%;
    --tx: -1vw;
    --rot: 0.9deg;
    --ar: 7/5;
  }
}

/* スマホ：headerが64pxになるので、本文カードの開始位置を少し下げる */
/* @media (orientation: portrait) and (max-width: 1280px){
  .main{
    margin-top: 106px;
    padding: 20px 14px 30px;
    border-radius: 22px;
  }
} */

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce) {
  .main img {
    transition: none !important;
  }
  .main img:hover {
    transform: none !important;
  }
}

/* =======================================================================
   Mobile typography tuning (news article)
   - スマホで「大きすぎ/小さすぎ」を避ける
   - ヘッダーには影響させない（.main / .article_text 内だけ調整）
   ======================================================================= */
@media screen and (max-width: 820px) {
  /* .header {
    overflow-x: scroll;
    height: 64px;
  }

  .header::-webkit-scrollbar {
    display: none;
  }

  .nav-list {
    line-height: 40px;
  }

  .header .nav-list ul {
    width: max-content;
  } */

  .main {
    margin-top: 106px;
    padding: 20px 14px 30px;
    border-radius: 22px;
  }

  /* .main .artilce_title{
    font-size: clamp(20px, 5.4vw, 28px) !important;
    line-height: 1.18 !important;
    max-width: 96% !important;
  } */
  /* .main .artilce_date{
    font-size: 13px !important;
    padding: 6px 10px !important;
  } */

  /* .main p{ font-size: 15.5px !important; line-height: 1.9 !important; }
  .main a{ font-size: 15.5px !important; } */

  /* .article_text{ 
    width: min(92%, 760px) !important; 
  }
  .article_text p{ 
    font-size: 16px !important; 
  } */
}

@media screen and (max-width: 360px) {
  .main p,
  .main a,
  .article_text p {
    font-size: 15px !important;
  }
  .main .artilce_title {
    font-size: clamp(19px, 6vw, 26px) !important;
  }
}