@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* すべての幅で #content の上パディングを0に */
#content.l-content.l-container {
  padding-top: 12px !important;
  margin-top: 0 !important;   /* 既に効いてるが念のため */
  overflow: hidden;           /* 折りたたみ対策はこのままでOK */
}

/* テーマがブレークポイントで再指定してくる時の保険 */
@media (min-width: 600px) {
  #content.l-content.l-container { padding-top: 12px !important; }
}
@media (min-width: 960px) {
  #content.l-content.l-container { padding-top: 12px !important; }
}


.post_content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.c-postTitle__ttl{
  display: none !important;
}

.post_content h1,
.entry-content h1 {
  margin-top: 0;
  margin-bottom: 0.5em;
  padding-top: 0.6em;  /* 線との間に少し余白 */
  border-top:2px solid #000; /* 黒の線を追加 */
  padding-bottom: 0.2em;  /* 線との間に少し余白 */
  border-bottom: 2px solid #000; /* 黒の線を追加 */
}

h2.mi-gradient {
  background: linear-gradient(135deg, rgb(255,255,255) 0%, rgb(255,255,255) 67%, rgb(135,135,135) 100%);
  color: #000;
  padding: 0.6em 1em;
  font-size: 1.2em;
  border-radius: 6px;
  display: inline-block;
}

/* ===========================
   レスポンシブ iframe
=========================== */
.responsive-iframe-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9; /* 必要に応じて変更 */
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.responsive-iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ===========================
   テキストアニメ
=========================== */

/* 1) 流れるグラデ文字 */
.mi-gradient-text {
  display: inline-block;
  background: linear-gradient(270deg,
    #0077b6,
    #00b4d8,
    #90e0ef,
    #caf0f8,
    #6f42c1,
    #0077b6
  );
  background-size: 1000% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: mi-grad-loop 12s ease infinite;
}
@keyframes mi-grad-loop {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===========================
   JSタイプライター（mi-typer 用）
=========================== */

.mi-typer {
  display: inline-block;
}

.mi-typer span {
  opacity: 0;
  display: inline-block;
  animation: mi-typer-char 0.05s steps(1, end) forwards;
}

/* 1文字ぶんの「パッ」と点灯するアニメーション */
@keyframes mi-typer-char {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 動きを苦手とする設定のとき停止 */
@media (prefers-reduced-motion: reduce) {
  .mi-typer span {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}
.mi-line {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  /* 幅は変えない。見える範囲だけを切り取る */
  clip-path: inset(0 100% 0 0);
}

/* 1文字ずつカクカク出てくるアニメーション */
@keyframes mi-type {
  from { clip-path: inset(0 100% 0 0); } /* 全部隠す（右側100%カット） */
  to   { clip-path: inset(0 0 0 0); }    /* 全部見せる */
}

/* 各行ごとに開始時間だけズラす（PCもスマホも共通でOK） */
.mi-line1 {
  animation: mi-type 4s steps(40, end) 0s forwards;
}
.mi-line2 {
  animation: mi-type 4s steps(40, end) 4s forwards;
}
.mi-line3 {
  animation: mi-type 4s steps(40, end) 8s forwards;
}
.mi-line4 {
  animation: mi-type 4s steps(40, end) 12s forwards;
}
.mi-line5 {
  animation: mi-type 4s steps(40, end) 16s forwards;
}

/* 3) シャイン */
.mi-shine { position: relative; display: inline-block; overflow: hidden; }
.mi-shine::after {
  content: "";
  position: absolute; top: 0; left: -150%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg);
  animation: mi-shine 2.2s ease-in-out infinite;
}
@keyframes mi-shine { to { left: 150%; } }

/* 4) 文字リビール（Mi Reveal）
   - JSで .is-prepared 付与後のみ透明→スライド */
.mi-reveal { display: inline-block; }
.mi-reveal.is-prepared span {
  display: inline-block;
  transform: translateY(1em);
  opacity: 0;
  animation: mi-up var(--mi-duration, .7s) ease forwards;
}
@keyframes mi-up {
  to { transform: translateY(0); opacity: 1; }
}

/* 5) マルキー */
.mi-marquee { overflow: hidden; white-space: nowrap; }
.mi-marquee > span {
  display: inline-block;
  padding-left: 100%;
  animation: mi-marquee 12s linear infinite;
}
@keyframes mi-marquee { to { transform: translateX(-100%); } }

/* -------------------------------
   動きを苦手とするユーザー設定
   （サイト全体の配慮）
-------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* 全体のアニメーションを停止 */
  .mi-type,
  .mi-gradient-text,
  .mi-shine,
  .mi-marquee > span {
    animation: none !important;
    transition: none !important;
  }
  .mi-type { border-right: none !important; }

  /* .mi-reveal は静止表示に */
  .mi-reveal.is-prepared span {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* マルキー：停止時に見え方を整える */
  .mi-marquee > span {
    padding-left: 0 !important;
    transform: none !important;
  }
}

/* ===== aspect-ratio フォールバック ===== */
@supports not (aspect-ratio: 1 / 1) {
  .responsive-iframe-wrapper {
    /* 16:9 をデフォルト比率に（--ratio で上書き可） */
    --ratio: 56.25%; /* 9 / 16 * 100 */
    position: relative;
    height: 0;
    padding-top: var(--ratio);
    overflow: hidden;
  }
  .responsive-iframe-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
}

/* オプション：よく使う比率のヘルパークラス */
.ratio-16x9 { --ratio: 56.25%; }  /* 16:9 */
.ratio-4x3  { --ratio: 75%; }     /* 4:3  */
.ratio-1x1  { --ratio: 100%; }    /* 1:1  */
.ratio-21x9 { --ratio: 42.857%; } /* 21:9 */