html {
 scroll-behavior: smooth;
 }
body {
 margin: 0;
 font-family: "メイリオ", sans-serif;
 background: #f5f5f5;
 color: #fff;
 scroll-behavior: smooth;
 letter-spacing: 0.05em;
}

header.header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: #fff;
 padding: 10px 20px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 position: relative;
 z-index: 1000;
 flex-wrap: nowrap;
}
.logo-group {
 display: flex;
 align-items: center;
 gap: 0;
}
.logo-group img {
 height: 40px;
}
.copy {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 padding-left: 25px;
}
.line1, .line2 {
 font-weight: bold;
 color: #777;
 font-size: 14px;
}
.line2 {
 padding-left: 20px;
}
.menu-toggle {
 font-size: 24px;
 cursor: pointer;
 color: #555;
}
.mobile-nav {
 display: none;
 flex-direction: column;
 background: #000;
 width: 100%;
}
.mobile-nav a {
 color: #fff;
 text-decoration: none;
 padding: 12px 20px;
 border-bottom: 1px solid #333;
 font-weight: bold;
}
.mobile-nav a:hover {
 background: #ff3d00;
}
@media(min-width:768px) {
 .menu-toggle {
  display: none;
 }
 .mobile-nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
 }
 .mobile-nav a {
  border-bottom: none;
  border-right: 1px solid #333;
 }
 .mobile-nav a:last-child {
  border-right: none;
 }
 .reward-table {
  max-width: 900px; /* PCで見たときの最大幅 */
  font-size: 1rem; /* PC用に文字サイズも微調整可 */
 }
}
h1, h2 {
 font-family: Impact, sans-serif;
 text-transform: uppercase;
 margin-top: 0;
 /*text-shadow: 2px 2px 4px #000;*/
 font-size: 28px;
}
.section-title {
 font-size: 26px;
 margin-bottom: 20px;
 display: inline-block;
 padding: 6px 10px;
 background: #000;
 color: #fff;
}
p, li {
 font-size: 18px;
 /*text-shadow: 1px 1px 3px #000;*/
}
ul {
 padding-left: 1.2em;
}
ul li {
 margin-bottom: 6px;
}
.comic-line {
 height: 10px;
 background: repeating-linear-gradient(
  -45deg,
  #000,
  #000 10px,
  #fff 10px,
  #fff 20px
 );
 margin: 40px 0;
}
.note {
 font-size: 17px;
 color: #151514;
 /*text-shadow: 1px 1px 3px #000;*/
 margin-top: 10px;
}
.note-mazu {
 font-size: 16px;
 color: #ffc107;
 /*text-shadow: 1px 1px 3px #000;*/
 margin-top: 10px;
 font-weight: bold;
 text-align: center;
 padding: 10px;
 background-color: rgba(0,0,0,0.5);
 border-radius: 8px;
}
.reward-table {
 width: 100%;
 border-collapse: collapse;
 margin-top: 20px;
 color: #fff;
 /*text-shadow: 1px 1px 3px #000;*/
 overflow-x: auto;
 display: block;
}
.reward-table table {
 width: 100%;
}
.reward-table th,
.reward-table td {
 border: 2px solid #000;
 padding: 10px;
 text-align: left;
}
.reward-table th {
 background: rgba(0,0,0,0.5);
}

.badge {
 position: absolute;
 background: #ff3d00;
 color: #fff;
 font-weight: bold;
 font-size: 18px;
 padding: 8px 20px;
 transform: rotate(10deg);
 transform-origin: top right;
 box-shadow: 2px 2px 0 #000;
 border: 2px solid #000;
 border-radius: 4px;
 top: 10px;
 right: 0px;
 left: auto;

 /* アメコミ風文字効果 ↓ */

 text-shadow:
  2px 2px 0 #000,
  3px 3px 0 #000,
  4px 4px 0 #000;
 -webkit-text-stroke: 1px black;
}

.panel {
 position: relative;
 opacity: 0;
 transform: translateY(40px);
 transition: all 0.6s ease;
 will-change: opacity, transform;
 scroll-margin-top: 70px;
 border: 6px solid #000;
 border-radius: 20px;
 box-shadow: 8px 8px 0 #000;
 margin: 0 auto 40px auto;
 max-width: 960px;
 padding: 40px 20px;
}
.panel.visible {
 opacity: 1;
 transform: translateY(0);
}
.hero-image {
 width: 100%;
 max-width: 1200px;
 display: block;
 margin: 0 auto 40px auto;
 box-shadow: 8px 8px 0 #000;
}
.work-flex {
 display: flex;
 align-items: center;
 gap: 20px;
 flex-wrap: wrap;
}
.work-image-inline {
 width: 150px;
 height: auto;
 border-radius: 8px;
 box-shadow: 4px 4px 0 #000;
}
h1, h2, .section-title {
 font-family: "メイリオ", sans-serif !important;
}
@media(max-width:768px) {
 h1, h2 {
  font-size: 22px;
 }
 .section-title {
  font-size: 20px;
 }
 p, li {
  font-size: 16px;
 }
 .panel {
  padding: 20px 15px;
 }
 .copy .line1,
 .copy .line2 {
  font-size: 12px;
 }
 .comic-container .narration{
  margin-top: auto;
 }
}
.footer {
 background: #000;
 color: #fff;
 text-align: center;
 padding: 20px 10px;
 font-size: 14px;
 letter-spacing: 0.05em;
}
.footer a {
 color: #fff;
 text-decoration: underline;
}
.footer a:hover {
 color: #ff3d00;
}
/* パネル背景 */
#intro { background: #ff9800;}
#works { background: #f44336;}
#style { background: #2196f3;}
#ideal { background: #43a047;}
#support { background: #ff7043;}
#income { background: #ec407a;}
#contact { background: #aaa624;}
#note { background: #00acc1;}
#consultation { 
    background: #fb923c; 
    border: 8px dashed #000;
}


.comic-container {
 font-family: 'Dela Gothic One', sans-serif;
 background-color: #fde047;
 padding: 10px;
 box-sizing: border-box;
}
.comic-container,
.comic-container * {
  font-family: 'RocknRoll One', sans-serif !important;
}

.comic-container .comic-container {
 width: 90%;
 max-width: 800px;
 border: 4px solid black;
 background-color: white;
 padding: 20px;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
 margin: 0 auto;
}

.comic-container .comic-panel {
 border: 4px solid black;
 position: relative;
 overflow: hidden;
 padding: 15px;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 transform: rotate(-2deg);
 box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
 min-height: 350px;
}

.comic-container .comic-panel .panel-yellow{
    margin: 0 auto;
}

.comic-container .comic-panel:nth-child(2) { transform: rotate(-3deg); }
.comic-container .comic-panel:nth-child(3) { transform: rotate(1.5deg); }
.comic-container .comic-panel:nth-child(4) { transform: rotate(1.5deg); }

.speech-box {
 background: #fff;
 border: 3px solid black;
 border-radius: 15px;
 padding: 10px 15px;
 box-shadow: 4px 4px 0 #000;
 max-width: 420px;
 margin: 0 auto;
 counter-reset: speech-counter;
}

.speech-line.number {
 position: relative;
 padding-left: 1.6em;
 margin-bottom: 8px;
 font-family: 'RocknRoll One', sans-serif;
 font-size: 0.95rem;
 color: #000;
 line-height: 1.4;
 counter-increment: speech-counter;
}

.speech-line.number::before {
 content: counter(speech-counter) ".";
 position: absolute;
 left: 0;
 top: 0;
 color: #000;
 font-weight: bold;
}


.speech-bubble-list {
 list-style-type: decimal;
 padding-left: 1.2em;
 margin: 0;
}

.speech-bubble-list li {
 margin-bottom: 8px;
 line-height: 1.4;
 font-family: 'RocknRoll One', sans-serif;
 font-size: 0.9rem;
 color: #222;
}
.speech-bubble ul.speech-list {
 padding-left: 1.2em;
 margin: 0;
 list-style-type: disc; /* ・を表示 */
}

.speech-bubble ul.speech-list li {
 margin-bottom: 8px;
 line-height: 1.4;
 font-family: 'RocknRoll One', sans-serif;
 font-size: 0.95rem;
 color: #000;
}
.comic-container .thought-bubble {
 background-color: #e5e7eb;
 border: 3px dashed black;
 border-radius: 15px;
 padding: 10px;
 text-align: left;
 font-size: 0.9rem;
 line-height: 1.5;
 margin-bottom: 10px;
 font-family: 'RocknRoll One', sans-serif;
}

.comic-container .panel-image {
 width: 100%;
 height: auto;
 max-height: 300px;
 border-radius: 5px;
 border: 2px solid black;
 object-fit: contain;
 display: block;
}

.comic-container .panel-image-small-right {
 width: 40%;
 height: auto;
 border: none;
 border-radius: 0;
 object-fit: contain;
 margin-top: 10px;
}

.comic-container .impact-text {
 font-family: 'Luckiest Guy', cursive;
 font-size: 2.5rem;
 line-height: 1.1;
 text-align: center;
 margin: 10px 0;
 padding: 5px;
 color: white;
 transform: rotate(-3deg);
 text-shadow: 3px 3px 0 #ef4444;
 -webkit-text-stroke: 1px black;
}

.comic-container .impact-text.smaller {
 font-size:2.35rem;
}
.comic-container .impact-text.smaller.consultation-title {
 font-size: 2.1rem;
}
.comic-container .consultation-title {
 font-size: 8rem;
}

.comic-container .image-row {
 display: flex;
 gap: 10px;
 justify-content: center;
 flex-wrap: wrap;
}

.comic-container .panel-image-small {
 width: 100%;
 height: auto;
 border-radius: 5px;
 border: 2px solid black;
 object-fit: contain;
}

.comic-container .banner-text {
 font-family: 'RocknRoll One', sans-serif;
 font-size: 2.5rem;
 line-height: 1.2;
 text-align: center;
 margin: 10px -15px;
 padding: 10px 5px;
 background-color: black;
 color: white;
 transform: rotate(-2deg);
}

.comic-container .narration {
 font-family: 'RocknRoll One', sans-serif;
 text-align: center;
 font-size: 1.3rem;
 font-weight: bold;
 background: rgba(255,255,255,0.7);
 padding: 5px;
 border-top: 2px solid black;
 position: relative;
 bottom: 34px;
 margin-bottom: -34px;
 color: #000;
}

.comic-container .panel-blue { background-color: #16d6cc; }
.comic-container .panel-green { background-color: #a3e635; }
.comic-container .panel-yellow { background-color: #fde047; }
.comic-container .panel-orange { background-color: #fb923c; }



/* 4コマ漫画全体 */
.comic-container {
 font-family: 'Dela Gothic One', sans-serif;
 background-color: #fde047;
 padding: 10px;
 box-sizing: border-box;

 width: 90%;
 max-width: 800px;
 border: 4px solid black;
 background-color: white;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
 margin: 0 auto 40px auto;
}

/* コマ */
.comic-container .comic-panel {
 border: 4px solid black;
 position: relative;
 overflow: hidden;
 padding: 15px;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 transform: rotate(-2deg);
 box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
 min-height: 350px;
}

.comic-container .comic-panel:nth-child(1) { transform: rotate(-1.5deg); }
.comic-container .comic-panel:nth-child(2) { transform: rotate(-1.5deg); }
.comic-container .comic-panel:nth-child(3) { transform: rotate(-1.5deg); }
.comic-container .comic-panel:nth-child(4) { transform: rotate(-1.5deg); }

.comic-container .speech-bubble {
 background-color: white;
 border: 3px solid black;
 border-radius: 15px;
 padding: 10px 12px;
 font-size: 0.95rem;
 line-height: 1.5;
 margin-bottom: 1px;
 font-family: 'RocknRoll One', sans-serif;
 color: #000;
 display: block;
 width: 100%;
 max-width: 350px;
 word-wrap: break-word;
 box-sizing: border-box;
 white-space: normal !important;
}

.speech-line {
 position: relative;
 padding-left: 1.6em; /* ✓のぶん左に余白確保 */
 margin-bottom: 8px;
 font-family: 'RocknRoll One', sans-serif;
 font-size: 0.95rem;
 color: #000;
 line-height: 1.4;
}

.speech-line::before {
 content: "✓";
 position: absolute;
 left: 0;
 top: 0;
 color: #007700; /* ✅ グリーンにする場合。黒にしたいなら #000 */
 font-weight: bold;
 font-size: 1rem;
}

.speech-bubble .line {
 line-height: 1.2;
}

.speech-bubble .line + .line {
 margin-top: 8px;
}

.comic-container .thought-bubble {
 background-color: #e5e7eb;
 border: 3px dashed black;
 border-radius: 15px;
 padding: 10px;
 text-align: left;
 font-size: 0.9rem;
 line-height: 1.5;
 margin-bottom: 10px;
 font-family: 'RocknRoll One', sans-serif;
 color:#000
}

/* 画像 */
.comic-container .panel-image {
 width: 100%;
 height: auto;
 max-height: 300px;
 border-radius: 5px;
 border: 2px solid black;
 object-fit: contain;
 display: block;
}

.comic-panel.panel-yellow .panel-image {
 max-height: 500px;
}

.comic-container .panel-image-small-right {
 width: 40%;
 height: auto;
 border: none;
 border-radius: 0;
 object-fit: contain;
 margin-top: 10px;
}

/* インパクトテキスト */
.comic-container .impact-text {
 font-family: 'Luckiest Guy', cursive;
 font-size: 2.5rem;
 line-height: 1.1;
 text-align: center;
 margin: 10px 0;
 padding: 5px;
 color: white;
 transform: rotate(-3deg);
 text-shadow: 3px 3px 0 #ef4444;
 -webkit-text-stroke: 1px black;
}

.impact-text.smaller {
 font-size: 3rem;    /* 以前より大きく調整 */
 padding-left: 0em;   /* 左に寄せる：必要に応じて0にしてもOK */
 margin-left: 0;     /* 余白がある場合は取り除く */
 text-align: center;    /* 左寄せ（centerなどになってる場合） */
 line-height: 1.2;    /* 行間をやや詰める（任意） */
}
.comic-container .impact-text.smaller.consultation-title {
 font-size: 2.1rem;
}
.comic-container .consultation-title {
 font-size: 8rem;
}

/* 横並び画像 */
.comic-container .image-row {
 display: flex;
 gap: 10px;
 justify-content: center;
 flex-wrap: wrap;
}
.comic-container .panel-image-small {
 width: 100%;
 height: auto;
 border-radius: 5px;
 border: 2px solid black;
 object-fit: contain;
}

/* バナー */
.comic-container .banner-text {
 font-family: 'RocknRoll One', sans-serif;
 font-size: 2.5rem;
 line-height: 1.2;
 text-align: center;
 margin: 10px -15px;
 padding: 10px 5px;
 background-color: black;
 color: white;
 transform: rotate(-2deg);
}

/* ナレーション */
.comic-container .narration {
 text-align: center;
 font-size: 1.3rem;
 font-weight: bold;
 background: rgba(255,255,255,0.7);
 padding: 5px;
 border-top: 2px solid black;
 position: relative;
 bottom: 34px;
 margin-bottom: -34px;
}

/* コマ背景色 */
.comic-container .panel-blue { background-color: #16d6cc; }
.comic-container .panel-green { background-color: #a3e635; }
.comic-container .panel-yellow { background-color: #fde047; }
.comic-container .panel-orange { background-color: #fb923c; }

.text-highlight {
 color: white;
 font-weight: bold;
 /*text-shadow: 2px 2px 0 black;*/
}
.text-highlight-sukima {
 color: white;
 font-weight: bold;
 /*text-shadow: 2px 2px 0 black;*/
}

/*スキマライダー営業募集要項*/
.text-highlight-title {
 font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
 font-size: 1.4rem; /* 数値を大きく調整 */
 color: #fff;
 /*text-shadow: 4px 4px 0 #000;*/
 background: #ff3d00;
 padding: 10px 20px;
 display: inline-block;
 transform: rotate(-2deg);
 box-shadow: 5px 5px 0 #000;
 margin-top: 20px;
 margin-bottom: 20px;
}
/*募集職種*/
.text-highlight-title-works {
 font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
 font-size: 1.5rem; /* 数値を大きく調整 */
 color: #fff;
 /*text-shadow: 4px 4px 0 #000;*/
 background: #ff0000c4;
 padding: 10px 20px;
 display: inline-block;
 transform: rotate(-2deg);
 box-shadow: 5px 5px 0 #000;
 margin-top: 20px;
 margin-bottom: 20px;
}
/*主な業務内容*/
.text-highlight-title-worksomo {
 font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
 font-size: 1.5rem; /* 数値を大きく調整 */
 color: #fff;
 /*text-shadow: 4px 4px 0 #000;*/
 background: #007bffc4;
 padding: 10px 20px;
 display: inline-block;
 transform: rotate(-2deg);
 box-shadow: 5px 5px 0 #000;
 margin-top: 20px;
 margin-bottom: 20px;
}
/*こんな方にぴったり*/
.text-highlight-title-workskonna {
 font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
 font-size: 1.4rem; /* 数値を大きく調整 */
 color: #fff;
 /*text-shadow: 4px 4px 0 #000;*/
 background: #118623e1;
 padding: 10px 20px;
 display: inline-block;
 transform: rotate(-2deg);
 box-shadow: 5px 5px 0 #000;
 margin-top: 33px;
 margin-bottom: 20px;
}
/*サポート体制*/
.text-highlight-title-workssupport {
 font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
 font-size: 1.5rem; /* 数値を大きく調整 */
 color: #fff;
 /*text-shadow: 4px 4px 0 #000;*/
 background: #e76128e1;
 padding: 10px 20px;
 display: inline-block;
 transform: rotate(-2deg);
 box-shadow: 5px 5px 0 #000;
 margin-top: 20px;
 margin-bottom: 20px;
}
/*報酬体系*/
.text-highlight-title-workssalary {
 font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
 font-size: 1.5rem; /* 数値を大きく調整 */
 color: #fff;
 /*text-shadow: 4px 4px 0 #000;*/
 background: #e40e80e1;
 padding: 10px 20px;
 display: inline-block;
 transform: rotate(-2deg);
 box-shadow: 5px 5px 0 #000;
 margin-top: 20px;
 margin-bottom: 20px;
}
/*応募方法*/
.text-highlight-title-worksapply {
 font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
 font-size: 1.6rem; /* 数値を大きく調整 */
 color: #fff;
 /*text-shadow: 4px 4px 0 #000;*/
 background: #85a804e1;
 padding: 10px 20px;
 display: inline-block;
 transform: rotate(-2deg);
 box-shadow: 5px 5px 0 #000;
 margin-top: 20px;
 margin-bottom: 20px;
}
/*備考*/
.text-highlight-title-worksnote {
 font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
 font-size: 1.6rem; /* 数値を大きく調整 */
 color: #fff;
 /*text-shadow: 4px 4px 0 #000;*/
 background: #0477a8e1;
 padding: 10px 20px;
 display: inline-block;
 transform: rotate(-2deg);
 box-shadow: 5px 5px 0 #000;
 margin-top: 20px;
 margin-bottom: 20px;
}

/* ★★★ START: ご相談セクションの強調表示用スタイル ★★★ */
.consultation-highlight-title {
   font-family: 'Luckiest Guy', cursive;
   font-size: 1.7rem; /* スマホでの文字サイズ */
   color: #fff;
   /*text-shadow: 4px 4px 0 #000;*/
   background: #c62828; /* 目立つ赤色に変更 */
   padding: 15px 20px; /* 左右のpaddingを少し減らしました */
   display: inline-block;
   transform: rotate(-2deg);
   box-shadow: 6px 6px 0 #000;
   margin-top: 50px;
   margin-bottom: 30px;
   text-align: center;
   margin-left: auto; /* 左右中央揃えにするため追加 */
   margin-right: auto; /* 左右中央揃えにするため追加 */
   border-bottom: 2px solid black; /* 線の太さと色を指定 */
   padding-bottom: 3px; /* テキストと線の間の余白 */
}

.consultation-text-box {
   background: rgba(255, 255, 255, 0.9);
   color: #333;
   border: 4px solid #000;
   padding: 20px;
   border-radius: 10px;
   font-size: 1.1rem; /* スマホでの文字サイズ */
   line-height: 1.8;
   font-weight: bold;
   text-shadow: none; /* 白背景なのでテキストの影は消す */
   font-family: "メイリオ", sans-serif;
}
/* ★★★ END: ご相談セクションの強調表示用スタイル ★★★ */
/* ★★★ END: ご相談セクションの強調表示用スタイル ★★★ */


ul li.text-highlight {
 color: white;
 font-weight: bold;
 /*text-shadow: 2px 2px 0 black;*/
}
.reward-table th {
  background: rgba(0,0,0,0.5);
  background-color: #d5a3c3; 
  color: #000000;
 }
 .reward-table td {
    background-color: #e7cede; /* マスの背景を白に */
    color: #000000;           /* 文字を黒に */
 }
/* レスポンシブ */
@media (max-width: 768px) {
 .comic-container {
  grid-template-columns: 1fr;
  width: 100%;
  padding: 10px;
  gap: 15px;
  font-family: 'Dela Gothic One', sans-serif;
 }
 .comic-container .comic-panel {
  transform: none;
  min-height: auto;
 }
 .comic-container .impact-text { font-size: 1.8rem; }
 .comic-container .banner-text { font-size: 2.4rem; }
 .comic-container .panel-image-small-right { width: 80%; }
 .comic-container .impact-text.smaller.consultation-title { font-size: 2.3rem; }
 .comic-container .image-row img { width: 80%; }

}
/* タブレット用768以上1024以下 */
@media screen and (min-width: 753px) and (max-width: 1023px) {
 .comic-container {
  grid-template-columns: 1fr 1fr; /* 2列のグリッドレイアウトを指定 */
 }
 .br-sp {
  display: none; /* br-spクラスを持つbrタグを非表示にする */
 }
 .reward-table table {
 width: 100%;
 }
 .reward-table th,
 .reward-table td {
  border: 2px solid #000;
  padding: 10px;
  text-align: left;
 }
 .reward-table th {
  background: rgba(0,0,0,0.5);
 }
 .comic-container .narration{
  margin-top: 20px;
 }
 .comic-container .banner-text {
  font-family: 'RocknRoll One', sans-serif;
  font-size: 2rem; /* ← ここの数値を小さくします（例: 2.5rem → 2rem） */
  line-height: 1.2;
  text-align: center;
  /* (以下略) */
 }
 .comic-container .impact-text.smaller {
 font-size: 1.8rem; /* ← ここの数値を小さくします（例: 2.35rem → 1.8rem） */
}
.hero-image {
 width: 100%;
 max-width: 1200px;
 display: block;
 margin: 0 auto 40px auto;
 box-shadow: 8px 8px 0 #000;
}
.comic-container .comic-panel.panel-yellow {
    grid-column: 1 / -1;
    justify-self: center;
    width: 50%;
  }
  .image-row {
    justify-content: flex-start; /* 左寄せ */
  }
  .image-row img {
    margin-left: 0; 
    margin-right: auto;
  }
  .note-mazu {
    font-size: 16px;
    color: #ffc107;
    /*text-shadow: 1px 1px 3px #000;*/
    margin-top: 10px;
    font-weight: bold;
    padding: 10px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 8px;
    text-align: left !important;
  }
  main.comic-container {
    padding-bottom: 24px;
    margin-bottom: 40px !important;
  }
    main.comic-container{
    padding-inline: 12px !important; /* 20px → 12px */
  }

}
/* --- スマホ用: ドロップダウン --- */
@media (max-width: 1023px){
  .mobile-nav{
    display: none;                 /* 初期は閉じる */
  }
  .mobile-nav.is-open{
    display: flex;
    position: fixed;               /* 画面に固定 */
    left: 0;
    right: 0;
    top: var(--nav-top, 64px);     /* ヘッダー高さ。JSで上書き */
    z-index: 3000;
    background: #000;
    flex-direction: column;
    max-height: calc(100vh - var(--nav-top, 64px));
    overflow-y: auto;
    border-top: 1px solid #333;
  }
  .mobile-nav a{
    padding: 14px 18px;
    border-bottom: 1px solid #333;
    color: #fff;
    text-decoration: none;
  }
  .menu-toggle{ display: block; }  /* ハンバーガーはスマホで表示 */
}

/* --- PC用: ヘッダー内で横並び（これまで通り） --- */
@media (min-width: 1024px){
  .mobile-nav{
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    background: transparent;
    max-height: none;
    overflow: visible;
    border: 0;
  }
  .mobile-nav a{ border: 0; padding: 10px 14px; }
  .menu-toggle{ display: none; }   /* PCでは非表示 */
}

@media (min-width: 1024px) {
 .comic-container {
  max-width: 1200px;
 }
 .comic-container .speech-bubble {
  max-width: 450px;     /* ✅ 吹き出し全体の幅を広げる */
  font-size: 1.05rem;    /* ✅ テキストサイズを少し大きく */
  padding: 14px 20px;    /* ✅ 内側の余白もゆったり */
  margin-left: 0;
  margin-right: auto;
 }
 /*スキマライダー営業募集要項*/
 .text-highlight-title {
  font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
  font-size: 1.4rem; /* 数値を大きく調整 */
  color: #fff;
  text-shadow: 4px 4px 0 #000;
  background: #ff3d00;
  padding: 10px 20px;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 #000;
  margin-top: -5px;
  margin-bottom: 20px;
 }
 /*募集職種*/
 .text-highlight-title-works {
  font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
  font-size: 1.5rem; /* 数値を大きく調整 */
  color: #fff;
  text-shadow: 4px 4px 0 #000;
  background: #ff0000c4;
  padding: 10px 20px;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 #000;
  margin-top: -5px;
  margin-bottom: 20px;
 }
 /*主な業務内容*/
 .text-highlight-title-worksomo {
  font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
  font-size: 1.5rem; /* 数値を大きく調整 */
  color: #fff;
  text-shadow: 4px 4px 0 #000;
  background: #007bffc4;
  padding: 10px 20px;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 #000;
  margin-top: -5px;
  margin-bottom: 20px;
 }
 /*こんな方にぴったり*/
 .text-highlight-title-workskonna {
  font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
  font-size: 1.4rem; /* 数値を大きく調整 */
  color: #fff;
  text-shadow: 4px 4px 0 #000;
  background: #118623e1;
  padding: 10px 20px;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 #000;
  margin-top: -5px;
  margin-bottom: 20px;
 }
 /*サポート体制*/
 .text-highlight-title-workssupport {
  font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
  font-size: 1.5rem; /* 数値を大きく調整 */
  color: #fff;
  text-shadow: 4px 4px 0 #000;
  background: #e76128e1;
  padding: 10px 20px;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 #000;
  margin-top: -5px;
  margin-bottom: 20px;
 }
 /*報酬体系*/
 .text-highlight-title-workssalary {
  font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
  font-size: 1.5rem; /* 数値を大きく調整 */
  color: #fff;
  text-shadow: 4px 4px 0 #000;
  background: #e40e80e1;
  padding: 10px 20px;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 #000;
  margin-top: -5px;
  margin-bottom: 20px;
 }
 /*応募方法*/
 .text-highlight-title-worksapply {
  font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
  font-size: 1.6rem; /* 数値を大きく調整 */
  color: #fff;
  text-shadow: 4px 4px 0 #000;
  background: #85a804e1;
  padding: 10px 20px;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 #000;
  margin-top: -5px;
  margin-bottom: 20px;
 }
 /*備考*/
 .text-highlight-title-worksnote {
  font-family: 'Luckiest Guy', cursive; /* アメコミ風 */
  font-size: 1.6rem; /* 数値を大きく調整 */
  color: #fff;
  text-shadow: 4px 4px 0 #000;
  background: #0477a8e1;
  padding: 10px 20px;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 #000;
  margin-top: -5px;
  margin-bottom: 20px;
 }
  .br-sp {
  display: none; /* br-spクラスを持つbrタグを非表示にする */
 }
 .reward-table table {
 width: 100%;
 }
 .reward-table th,
 .reward-table td {
  border: 2px solid #000;
  padding: 10px;
  text-align: left;
 }
 .reward-table th {
  background: rgba(0,0,0,0.5);
  background-color: #d5a3c3; 
  color: #000000;
 }
 .reward-table td {
    background-color: #e7cede; /* マスの背景を白に */
    color: #000000;           /* 文字を黒に */
 }

 .comic-container .narration{
  margin-top: 20px;
 }

    /* ★★★ START: PC表示でのご相談セクション強調表示 ★★★ */
    .consultation-highlight-title {
        font-size: 2.8rem; /* PCではさらに大きく */
    }
    .consultation-text-box {
        font-size: 1.3rem; /* PCではさらに大きく */
    }
    /* ★★★ END: PC表示でのご相談セクション強調表示 ★★★ */
    .comic-container .comic-panel.panel-yellow {
    grid-column: 1 / -1;
    justify-self: center;
    width: 50%;
    }
    .image-row {
    justify-content: flex-start; /* 左寄せ */
  }
  .image-row img {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /*
  body {
    zoom: 93%;
  }*/

  .note-mazu {
    font-size: 16px;
    color: #ffc107;
    /*text-shadow: 1px 1px 3px #000;*/
    margin-top: 10px;
    font-weight: bold;
    padding: 10px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 8px;
    text-align: left !important;
  }
  html, body { overflow-x: hidden; }

  /* ヒーロー画像をフル幅＆中央余白なし */
  .hero-image {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 40px 0 !important;
    box-shadow: none;      /* 影を残したい場合は消してください */
    border-radius: 0;
  }

  /* 各パネル（募集要項など）をフル幅に */
  .panel {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0;      /* 角丸を残したい場合は消してください */
  }

  /* メインのコンテナもフル幅化 */
  main.comic-container,
  .comic-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* 枠線で左右に余白っぽく見えるのが嫌なら以下も外してOK */
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* スマートにしたい場合、ボックス影も外す */
  .panel, .hero-image {
    box-shadow: none;
  }
  
  main.comic-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 16px;            /* 端にくっつき過ぎるならここで微調整 */
    border-left: 0 !important;
    border-right: 0 !important;
  }
  main.comic-container .comic-panel {
    min-height: 100%;
    transform: none;            /* 傾き不要なら解除。必要なら消してOK */
  }
  main.comic-container > .comic-panel.panel-yellow {
    grid-column: auto !important;
    width: auto !important;
    justify-self: stretch !important;
  }
    main.comic-container {
    margin: 24px 0 48px !important;  /* 上24px / 下48px（好みで調整） */
    padding-top: 12px;                 /* 内側にも少しクッション */
    padding-bottom: 8px;
  }
  main.comic-container {
    padding-bottom: 50px;         /* ← 枠の位置を下へ（数値で調整） */
    margin-bottom: 56px !important;/* ← 下のパネルとの間隔も確保 */
  }
  /* 区切り線はレイアウトの邪魔になるので非表示 */
  .comic-line { display: none !important; }

  /* 2カラム化（左右に少し余白） */
  .panel {
    display: inline-block;
    width: calc(50% - 32px) !important; /* 2列になるよう調整 */
    margin: 16px !important;            /* パネル間のすき間 */
    vertical-align: top;
    max-width: none !important;
    box-sizing: border-box;              /* 枠・パディング込みで計算 */
  }
  
}
 @media (min-width: 1024px) {
.comic-container .speech-bubble {
 background-color: white;
 border: 3px solid black;
 border-radius: 15px;
 padding: 18px 20px;      /* 内側の余白を広げる */
 font-size: 1rem;        /* 文字を少し大きくする */
 line-height: 1.6;       /* 行間も少し広げる */
 margin-bottom: 1px;
 font-family: 'RocknRoll One', sans-serif;
 color: #000;
 display: block;
 width: 100%;
 max-width: 650px;       /* 吹き出しの最大幅を広げる */
 word-wrap: break-word;
 box-sizing: border-box;
 white-space: normal !important;
}
/* 区切り線は非表示 */
  .comic-line { display: none !important; }

  /* 各パネルを横2並びにする（高い優先度で上書き） */
  #intro.panel,
  #works.panel,
  #style.panel,
  #ideal.panel,
  #support.panel,
  #income.panel,
  #consultation.panel,
  #contact.panel,
  #note.panel {
    display: inline-block !important;
    width: calc(50% - 32px) !important; /* 2列 */
    margin: 16px !important;
    vertical-align: top;
    max-width: none !important;
    box-sizing: border-box;
  }
  #intro, #works, #style, #ideal, #support, #income, #consultation, #contact, #note {
    float: left !important;
  }
  footer { clear: both; } /* フッターが回り込みを食らわないように */
  .panels-masonry {
    column-count: 2;        /* 2列 */
    column-gap: 24px;       /* 列間のすき間 */
    padding: 0 16px;        /* 端のよゆう（調整可） */
  }

  .panels-masonry .panel {
    display: block !important;
    width: auto !important;               /* 既存の 50% 指定を無効化 */
    margin: 0 0 24px 0 !important;        /* 下だけ余白（列内で詰める） */
    float: none !important;               /* 保険：float解除 */
    break-inside: avoid;                  /* カードの途中改ページ防止 */
    box-sizing: border-box;
  }

  /* PCでは区切り線を消す（レイアウトの邪魔になるため） */
  .panels-masonry .comic-line { 
    display: none !important; 
  }
  .panels-masonry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列固定 */
    gap: 28px;                 /* パネル間のすき間 */
    align-items: start;        /* 高さ違いでも上揃え */
    padding: 0 16px;           /* 端の余白（好みで調整） */
  }

  .panels-masonry .panel {
    display: block !important;
    width: 100% !important;    /* 列幅いっぱいに */
    margin: 0 !important;      /* 余白はGridのgapで管理 */
    max-width: none !important;
    float: none !important;    /* 以前のfloat対策 */
    box-sizing: border-box;
  }

  /* 区切り線はGridでは邪魔なので消す */
  .panels-masonry .comic-line { display: none !important; }
  .panels-masonry {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(560px, 1fr)); /* ←広めにしたければ数値↑ */
    gap: 28px;
    padding: 0 12px;  /* 端の余白。要らなければ 0 に */
  }

  /* Gridのセルいっぱいに広げる（古い inline-block/float を打ち消す） */
  .panels-masonry > .panel {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;        /* 余白は gap で管理 */
    float: none !important;
    box-sizing: border-box;
  }

  /* ID付きで強く効いていた古い幅指定を“同じ強さ”で打ち消す */
  .panels-masonry > #intro.panel,
  .panels-masonry > #works.panel,
  .panels-masonry > #style.panel,
  .panels-masonry > #ideal.panel,
  .panels-masonry > #support.panel,
  .panels-masonry > #income.panel,
  .panels-masonry > #consultation.panel,
  .panels-masonry > #contact.panel,
  .panels-masonry > #note.panel {
    width: 100% !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
  }
  .panels-masonry {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(560px, 1fr)); /* 数値は好みで */
    gap: 28px;
    grid-auto-flow: row dense;
  }

  /* 念のため、古い float/inline-block 指定を無効化 */
  .panels-masonry > .panel {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  /* 右列（2列目）に固定して縦に並べる */
  .panels-masonry > #contact.panel { grid-column: 2 !important; }
  .panels-masonry > #note.panel    { grid-column: 2 !important; }
  .panels-masonry {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(560px, 1fr));
    /* 縦のすき間を小さく（上：行ギャップ / 下：列ギャップ） */
    gap: 12px 28px; 
    /* ここがポイント：各セルの高さまで中身を伸ばす */
    align-items: stretch !important;
  }

  /* パネルをセル高いっぱいに広げる（中の余白はpaddingで確保済み） */
  .panels-masonry > .panel {
    height: 100% !important;
    margin: 0 !important;      /* 余白は gap で管理 */
    float: none !important;    /* 古い指定の打ち消し */
    display: block !important;
    box-sizing: border-box;
  }

  /* 並び位置：応募方法 → 備考（右列） */
  .panels-masonry > #contact.panel { grid-column: 2 !important; }
  .panels-masonry > #note.panel    { grid-column: 2 !important; }
  .panels-masonry {
    display: grid !important;
    grid-template-columns: 1fr 1fr;   /* 全体は2列 */
    gap: 24px 28px;
    align-items: start;
    grid-auto-flow: row dense;
  }

  /* 古い inline-block / float / 幅指定を無効化してセルいっぱいに */
  .panels-masonry .panel {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box;
  }

  /* 左列に固定（任意だが明示しておく） */
  .panels-masonry #consultation { grid-column: 1 !important; }

  /* 右列のセルに“2分割グリッド”を作って中で半々に並べる */
  .contact-note-pair {
    grid-column: 2 !important;        /* 右列に配置 */
    display: grid !important;
    grid-template-columns: 1fr 1fr;    /* ← 半分半分 */
    gap: 16px;
    align-items: stretch;
  }
  .contact-note-pair .panel {
    height: 100%;
    margin: 0 !important;              /* 余白は gap で管理 */
    width: 100% !important;
    float: none !important;
    display: block !important;
  }
   /* 行内のアイテムを行高いっぱいに伸ばす */
  .panels-masonry {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
    align-items: stretch !important;  /* ← これが効く */
  }

  /* 右側のペアを2分割＆コンテナ自体を行高いっぱいに */
  .contact-note-pair {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;   /* 半分ずつ */
    gap: 16px;
    align-items: stretch !important;
    height: 100% !important;          /* 行高いっぱい */
  }

  /* 中の各パネルもコンテナ高に合わせて伸ばす */
  .contact-note-pair .panel {
    display: block !important;
    width: 100% !important;
    height: 100% !important;          /* ← 同じ高さに */
    margin: 0 !important;             /* 余白は gap で管理 */
    float: none !important;
    box-sizing: border-box;
  }

  /* 念のため、個別IDに残っている幅/float指定を無効化 */
  .panels-masonry > #contact.panel,
  .panels-masonry > #note.panel {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
  .panels-masonry {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
    align-items: stretch !important;
  }

  /* 左列：憧れの車 */
  .panels-masonry > #consultation { grid-column: 1 !important; }

  /* 右列：応募方法＋備考を半分ずつ */
  .panels-masonry > .contact-note-pair {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;  /* 半分ずつ */
    gap: 16px;
    align-items: stretch !important;
    height: 100% !important;         /* 行の高さに合わせる */
    margin: 0 !important;
  }

  /* ここがキモ：以前の #contact/#note の inline-block/width/float を打ち消す */
  .contact-note-pair > #contact.panel,
  .contact-note-pair > #note.panel {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    height: 100% !important;
    box-sizing: border-box;
  }
  .panels-masonry {
    display: grid !important;
    grid-template-columns: 1fr 1fr;   /* 左：consultation ／ 右：contact+note */
    gap: 24px 28px;
    align-items: stretch !important;
  }

  /* 左列：憧れの車 */
  .panels-masonry > #consultation { grid-column: 1 !important; }

  /* 右列：縦2分割（上下1:1） */
  .panels-masonry > .contact-note-pair {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr;       /* ← 1列 */
    grid-template-rows: 1fr 1fr;      /* ← 上下を同じ高さに */
    gap: 16px;
    height: 100% !important;          /* 行の高さにフィット */
    align-items: stretch !important;
    margin: 0 !important;
  }

  /* 中のパネルが余計な幅・floatを持っていても打ち消す */
  .contact-note-pair > #contact.panel,
  .contact-note-pair > #note.panel {
    display: block !important;
    width: 100% !important;
    height: 100% !important;          /* それぞれペア内で同じ高さに */
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box;
  }
  .panels-masonry > .contact-note-pair {
    grid-template-columns: 1fr;        /* 1列 */
    grid-template-rows: 1fr auto !important; /* 上は余り全部 / 下は内容分だけ */
    height: 100% !important;           /* 左列の高さにフィット */
    gap: 16px;
  }

  /* 応募方法は行の残りを埋める */
  .contact-note-pair > #contact.panel {
    height: 100% !important;
  }

  /* 備考は自然な高さのまま（伸ばさない） */
  .contact-note-pair > #note.panel {
    height: auto !important;
    align-self: start !important;      /* 上寄せ */
  }
  /* 行全体で“縦に引き伸ばし”をやめる */
  .panels-masonry { 
    align-items: start !important; 
  }

  /* 右列のペアは“内容ぶんの高さだけ”にする（上下とも auto） */
  .panels-masonry > .contact-note-pair {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto !important;  /* ← 両方とも自動高さ */
    gap: 16px;
    height: auto !important;                   /* ← 行高まで伸ばさない */
    align-self: start !important;              /* ← 上寄せにする */
    margin: 0 !important;
  }

  /* 中の2枚も“伸ばさない” */
  .contact-note-pair > #contact.panel,
  .contact-note-pair > #note.panel {
    height: auto !important;
    align-self: start !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
  }
   /* グリッドが子要素の高さを引き伸ばさないようにする */
  main.comic-container{
    align-items: start !important;   /* ← stretch をやめる */
    grid-auto-rows: auto !important; /* 念のため */
  }

  /* 先に入れていた min-height:100% を打ち消し、自然な高さへ */
  main.comic-container .comic-panel{
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
  }

  /* ベースの 350px 最小高も上書き（青/緑に限定してもOK） */
  main.comic-container .panel-blue,
  main.comic-container .panel-green{
    min-height: 0 !important;
  }
  /* 青コマ：チェック項目（吹き出し）の下に少し余白を追加 */
main.comic-container .panel-blue .speech-bubble{
  margin-bottom: 16px !important;   /* お好みで 12〜24px に調整 */
}

/* 吹き出しの内側の下余白も少し増やしたい場合は併用（任意） */
main.comic-container .panel-blue .speech-bubble{
  padding-bottom: 16px;             /* こちらは好みで */
}
/* 青いコマ：見出しの下に少し余白 */
main.comic-container .panel-blue > .impact-text.smaller{
  margin-bottom: 30px !important;   /* お好みで 16〜28px に調整可 */
}
  main.comic-container{
    /* 24px–48px → 少なめに */
    padding-inline: clamp(12px, 1.8vw, 28px) !important;
    gap: 16px !important; /* 24px → 16px に */
  }
    /* パネル内の箇条書き */
  .panel ul li{
    font-size: 1.2rem;   /* お好みで 1.15〜1.3rem などに */
    line-height: 1.8;
  }

  /* 3コマ漫画のチェック行・番号付き行 */
  .speech-bubble .line,
  .speech-line,
  .speech-line.number{
    font-size: 1.15rem;  /* お好みで微調整 */
    line-height: 1.8;
  }
    .comic-container .panel-blue h2.impact-text.smaller{
    font-size: 3.4rem;   /* お好みで 3.0〜3.8rem などに調整 */
    line-height: 1.15;
    margin-bottom: 12px; /* 下にちょい余白をつけたい場合 */
  }
    .comic-container .panel-yellow h3.banner-text{
    font-size: 3.2rem !important;  /* お好みで 3.0〜3.6rem に調整 */
    line-height: 1.15;
    margin-bottom: 12px;            /* 下に少し余白（任意） */
  }
  .panels-masonry { margin-bottom: 30px !important; }
  header.header {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  header.header .logo-group { 
    flex: 0 0 auto;
  }

  /* ナビを右端へ、背景は透明化、横並び */
  header.header #nav {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    margin-left: auto;        /* ← 右側へ寄せる */
    background: transparent;  /* モバイル時の黒背景を解除 */
    width: auto;
    padding: 0;
    border: 0;
  }

  /* PC用のナビリンクの見た目 */
  header.header #nav a {
    color: #000;              /* お好みで */
    padding: 8px 10px;
    border: 0;                /* モバイル時の区切り線を消す */
    font-weight: bold;
    text-decoration: none;
  }
  header.header #nav a:hover {
    color: #ff3d00;           /* ホバー色（お好みで） */
  }

  /* ハンバーガーはPCで非表示 */
  .menu-toggle { display: none !important; }
   /* ヘッダーを画面上部に固定（スクロールしても残る） */
  header.header{
    position: sticky;   /* 固定にしたいだけなら sticky が簡単 */
    top: 0;
    z-index: 3000;      /* パネルより前面に */
    background: #fff;   /* 透け防止 */
  }

  /* ナビの文字を小さく＆間隔も少しだけ詰める */
  header.header #nav a{
    font-size: 0.9rem;  /* ← お好みで 0.85～0.95rem */
    padding: 6px 8px;   /* 既存の 8px 10px より控えめに */
  }

  /* 必要ならナビを1行で維持（改行させたくない場合） */
  header.header #nav{
    white-space: nowrap;
    gap: 14px;          /* 既存 18px から少し詰める例 */
  }
  html { zoom: .82 !important; }
    /* アクティブなリンク：赤背景 + 黒文字 */
  header.header #nav a.active{
    background: var(--nav-active-bg); /* 例: #e53935 */
    color: #000 !important;           /* ← 黒文字に固定 */
  }
  /* アクティブ状態のままホバーしても黒文字を維持 */
  header.header #nav a.active:hover{
    background: var(--nav-active-bg);
    color: #000 !important;
  }
   /* 通常は黒文字（保険） */
  header.header #nav a{
    color: #000 !important;
  }
  /* クリック中 / フォーカス中 / activeクラス付与時 */
  header.header #nav a:active,
  header.header #nav a:focus,
  header.header #nav a.active{
    background: #ff3d00;       /* 真っ赤 */
    color: #000 !important;     /* ← 黒を強制 */
  }
  /* アクティブ状態でホバーしても黒を維持 */
  header.header #nav a.active:hover{
    background: #ff3d00;
    color: #000 !important;
  }
  /* 訪問済み色が勝たないように */
  header.header #nav a:visited{
    color: #000 !important;
  }
    header.header #nav a{
    font-size: 0.98rem !important;  /* お好みで 0.95–1.05rem あたりに調整 */
    letter-spacing: .02em;          /* ほんの少し読みやすく（任意） */
  }
  /* === 文字サイズアップ：ここから追記（最下部に貼る） === */

/* ▼ 三コマ漫画（main.comic-container内）見出し系 */
main.comic-container .impact-text{
  font-size: clamp(2.2rem, 5vw, 3.2rem) !important;
}
main.comic-container .impact-text.smaller{
  font-size: clamp(2.4rem, 5.5vw, 3.6rem) !important;
}
main.comic-container .banner-text{
  font-size: clamp(2.4rem, 5.5vw, 3.8rem) !important;
}

/* ▼ 三コマ漫画：吹き出し・番号付き行 */
main.comic-container .speech-bubble{
  font-size: clamp(1.05rem, 2.2vw, 1.25rem) !important;
  line-height: 2.5 !important;
}
main.comic-container .speech-line,
main.comic-container .speech-line.number{
  font-size: clamp(1.05rem, 2.2vw, 1.25rem) !important;
}

/* ▼ 三コマ漫画：ナレーション */
main.comic-container .narration{
  font-size: clamp(1.2rem, 2.6vw, 1.6rem) !important;
}

/* ▼ 三コマ漫画：黄色パネルの番号付きボックス内の行 */
main.comic-container .speech-box .speech-line.number{
  font-size: clamp(1.05rem, 2.2vw, 1.3rem) !important;
}

/* ▼ 以降の各パネル（募集要項・業務内容など）の見出し */
.panels-masonry .text-highlight-title,
.text-highlight-title-works,
.text-highlight-title-worksomo,
.text-highlight-title-workskonna,
.text-highlight-title-workssupport,
.text-highlight-title-workssalary,
.text-highlight-title-worksapply,
.text-highlight-title-worksnote,
.consultation-highlight-title{
  font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem) !important;
}

/* ▼ 以降の各パネルの本文・箇条書きなど */
.panels-masonry .panel p,
.panels-masonry .panel li,
.panels-masonry .panel .text-highlight,
.panels-masonry .panel .note,
.panels-masonry .panel .note-mazu{
  font-size: clamp(1.5rem, 1.5vw + 1.4rem, 1.75rem) !important;
  line-height: 1.9 !important;
}

/* ▼ 応募方法のリンク文字も少し大きく */
#contact.panel a{
  font-size: 1.15em !important;
}

/* ▼ 報酬テーブル内の文字 */
#income .reward-table th,
#income .reward-table td{
  font-size: clamp(1rem, 1vw + 0.8rem, 1.2rem) !important;
}
/* === 文字サイズアップ：ここまで === */
/* 画像とテキストを横並び（左：画像／右：テキスト） */
  #works .work-flex{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 18px;
    align-items: center;
  }

  #works .work-image-inline{
    width: 100% !important;   /* パネル内の列幅いっぱいに */
    max-width: 100% !important;
    height: auto !important;  /* 縦横比キープで伸縮 */
    display: block;
    object-fit: contain;      /* 余白OKでトリミングしない */
    /* 端までピッタリ埋めたい場合は ↑ を cover に変更
       object-fit: cover;   ←にすると一部トリミングされます */
    /* 固定比率にしたいなら必要に応じて有効化
       aspect-ratio: 4 / 3; */
  }
   /* パネル幅を参照できるようにする */
  #works.panel{
    container-type: inline-size;
  }

  /* 画像：パネル内の列幅にフィット（お好みで contain/cover調整） */
  #works .work-image-inline{
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    display: block;
  }

  /* レイアウト：テキスト側を少し広めに */
  #works .work-flex{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); /* 画像 : テキスト */
    gap: clamp(12px, 2cqw, 28px);
    align-items: center;
  }

  /* ★本文（「営業委託パートナー（副業・ダブルワークOK）」）を自動調整 */
  #works .text-highlight{
    /* パネル幅に比例して拡大：最小1.25rem～最大2.4remの範囲で可変 */
    font-size: clamp(1.25rem, 3.6cqw, 2.4rem) !important;
    line-height: 1.8 !important;
    text-wrap: balance; /* 改行もバランスよく */
  }
    /* 1. 番号行を2カラム（左：番号 / 右：本文）にしてベースラインで揃える */
  main.comic-container .speech-box .speech-line.number{
    display: grid !important;
    grid-template-columns: 2.4ch 1fr; /* 桁幅。10. でもOK */
    column-gap: .6ch;
    align-items: baseline;            /* ←ズレ防止のキモ */
    padding-left: 0 !important;       /* 既存のインデントを無効化 */
    line-height: 1.8 !important;      /* 行間はお好みで */
    font-size: clamp(1.1rem, 1.7cqw, 1.7rem) !important; /* 本文サイズ */
  }

  /* 2. ✓用のabsolute指定が流れ込むのを完全に打ち消す */
  main.comic-container .speech-box .speech-line.number::before{
    content: counter(speech-counter) ".";
    counter-increment: speech-counter;
    position: static !important;   /* ←absoluteを無効化 */
    left: auto !important;
    top: auto !important;
    min-width: 2.4ch;              /* 桁幅とそろえる */
    text-align: right;
    font-size: 1em;                /* 数字の大きさ（本文と同じ） */
    line-height: 1;                /* ベースライン合わせ */
  }

  /* 3. 念のため ✓ の見た目が勝たないように上書き（保険） */
  main.comic-container .speech-box .speech-line.number{
    counter-increment: speech-counter;
  }
    /* カウンタの起点を明示（念のため） */
  .panel-yellow .speech-box{ counter-reset: speech-counter !important; }

  /* 行本体：ここでだけカウンタを+1する（数字と本文のレイアウトも整える） */
  .panel-yellow .speech-box .speech-line.number{
    display: grid !important;
    grid-template-columns: 2.4ch 1fr;  /* 左：番号 / 右：本文 */
    column-gap: .6ch;
    align-items: baseline;
    padding-left: 0 !important;
    line-height: 1.8 !important;

    /* ← 文字が大きすぎる対策（お好みで上下） */
    font-size: clamp(1.05rem, 1.2cqw, 1.35rem) !important;

    counter-increment: speech-counter; /* ★増分はここだけ★ */
  }

  /* 番号：absoluteをやめ、カウンタは増やさない（偶数化の原因を除去） */
  .panel-yellow .speech-box .speech-line.number::before{
    content: counter(speech-counter) ".";
    position: static !important;
    counter-increment: speech-counter 0 !important; /* ★二重加算を無効化★ */
    min-width: 2.4ch;
    text-align: right;
    font-size: 1em;   /* 数字だけ大きくしたい時は 1.2em などに */
    line-height: 1;
  }
    .panel-yellow .speech-box .speech-line.number{
    /* ひとまわり小さく（約10%ダウン） */
    font-size: clamp(0.98rem, 1.1cqw, 1.22rem) !important;
    line-height: 1.75 !important;
  }
  /* 数字のサイズは本文と同じにする場合はこのまま */
  .panel-yellow .speech-box .speech-line.number::before{
    font-size: 1em !important;
  }
  .panel-yellow .speech-box .speech-line.number{
    /* 約10〜15%ダウン */
    font-size: clamp(0.90rem, 0.95cqw, 1.10rem) !important;
    line-height: 1.65 !important;
    grid-template-columns: 2.2ch 1fr; /* 左の番号カラムも少し細く */
    column-gap: .5ch;
  }
  /* 数字も少しだけ小さく（本文と同じにしたい場合は 1em に） */
  .panel-yellow .speech-box .speech-line.number::before{
    font-size: 0.95em !important;
  }
    .panel-yellow .speech-box .speech-line.number{
    font-size: clamp(0.74rem, 0.62cqw, 0.90rem) !important;
    line-height: 1.45 !important;
    grid-template-columns: 2.1ch 1fr; /* 10. まで入る最小幅 */
    column-gap: .4ch;
    margin-bottom: 6px;
  }
  .panel-yellow .speech-box .speech-line.number::before{
    font-size: 0.88em !important; /* 数字自体も少し縮小 */
  }
    /* 1) 既存のクランプ・!importantを無効化してから設定（順番が大事） */
  .panel-yellow .speech-box .speech-line.number{
    font-size: initial !important;  /* いったん初期化 */
    line-height: initial !important;
  }

  /* 2) 小さめに固定（ここで最終値を強制） */
  .panel-yellow .speech-box .speech-line.number{
    font-size: 0.68rem !important;  /* ←もっと小さくなら 0.62rem / 0.58rem 等 */
    line-height: 1.40 !important;
    display: grid !important;
    grid-template-columns: 2.2ch 1fr;
    column-gap: .5ch;
    padding-left: 0 !important;
  }

  /* 3) 番号も同じ比率で小さく（本文と揃えるなら 1em のままでOK） */
  .panel-yellow .speech-box .speech-line.number::before{
    font-size: 0.95em !important;   /* もっと小さくなら 0.9em */
    position: static !important;     /* absoluteのズレを抑止 */
    min-width: 2.2ch;
    text-align: right;
    line-height: 1;
    counter-increment: speech-counter 0 !important; /* 二重加算の保険 */
  }

  /* 念のため：カウンタは行本体でだけ+1 */
  .panel-yellow .speech-box{ counter-reset: speech-counter !important; }
  .panel-yellow .speech-box .speech-line.number{ counter-increment: speech-counter; }
    /* カウンタの起点（保険） */
  main.comic-container .panel-yellow .speech-box{
    counter-reset: speech-counter !important;
  }

  /* ← 他2コマの .speech-line と同じ clamp に統一 */
  main.comic-container .panel-yellow .speech-box .speech-line.number{
    font-size: clamp(1.05rem, 2.2vw, 1.25rem) !important; /* 他2コマと同じ */
    line-height: 1.8 !important;                           /* 他2コマと同じ */
    display: grid !important;
    grid-template-columns: 2.4ch 1fr;
    column-gap: .6ch;
    padding-left: 0 !important;
    counter-increment: speech-counter;
  }

  /* 番号の見た目・揃え（サイズは本文と同じ=1em） */
  main.comic-container .panel-yellow .speech-box .speech-line.number::before{
    content: counter(speech-counter) ".";
    position: static !important;                 /* ずれ防止 */
    counter-increment: speech-counter 0 !important;/* 二重加算防止 */
    min-width: 2.4ch;
    text-align: right;
    font-size: 1em !important;                   /* 他2コマと同じ大きさに */
    line-height: 1;
  }
  .hero-image{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;      /* 画像は基本トリミングしない */
    object-position: 50% 50% !important; /* 見せたい位置の微調整はここ */

    /* ほんの少し拡大（必要なら数値を 1.02〜1.06 で調整） */
    transform: scale(1.03);
    transform-origin: center center;
    will-change: transform;
  }
  /* ▼ 三コマ漫画：ふきだし文字をまとめて拡大（blue/green/yellow 全対応） */
main.comic-container .speech-bubble,
main.comic-container .speech-bubble .line,
main.comic-container .speech-line,
main.comic-container .speech-box .speech-line.number {
  font-size: clamp(1.25rem, 2.8vw, 1.7rem) !important;
  line-height: 1.9 !important;
}

/* ✓ や番号のサイズも文字に合わせて少し拡大 */
main.comic-container .speech-line::before,
main.comic-container .speech-box .speech-line.number::before {
  font-size: 1.05em !important;
}
main.comic-container .panel-yellow .speech-box .speech-line.number {
  font-size: clamp(1.25rem, 2.8vw, 1.7rem) !important;
  line-height: 1.9 !important;
  display: grid !important;
  grid-template-columns: 2.4ch 1fr !important;
  column-gap: .6ch !important;
  padding-left: 0 !important;
}

/* 番号(1., 2., …)も本文と同じ大きさに */
main.comic-container .panel-yellow .speech-box .speech-line.number::before {
  font-size: 1em !important;
  position: static !important;
  min-width: 2.4ch;
  text-align: right;
}
main.comic-container{
  --speech-size: clamp(1.25rem, 2.8vw, 1.7rem);
  --speech-leading: 1.9;
}

/* 青・緑：通常の吹き出し */
main.comic-container .speech-bubble,
main.comic-container .speech-bubble .line,
main.comic-container .speech-line{
  font-size: var(--speech-size) !important;
  line-height: var(--speech-leading) !important;
}

/* 黄：番号付きボックスの行も同じサイズに */
main.comic-container .panel-yellow .speech-box .speech-line.number{
  font-size: var(--speech-size) !important;
  line-height: var(--speech-leading) !important;
  /* レイアウトは現状のままでOK。もし数字と本文のズレがあれば↓有効化 */
  display: grid !important;
  grid-template-columns: 2.4ch 1fr !important;
  column-gap: .6ch !important;
  padding-left: 0 !important;
}

/* 黄：数字(1.,2.,…)も本文と同サイズで */
main.comic-container .panel-yellow .speech-box .speech-line.number::before{
  font-size: 1em !important;
  position: static !important;
  min-width: 2.4ch;
  text-align: right;
}
main.comic-container{
  --yellow-speech-size: clamp(1.5rem, 3.2vw, 2.1rem); /* 文字を大きく */
  --yellow-leading: 2.0;                               /* 行間もゆったり */
}

/* 本文（番号付き行） */
main.comic-container .panel-yellow .speech-box .speech-line.number{
  font-size: var(--yellow-speech-size) !important;
  line-height: var(--yellow-leading) !important;
  display: grid !important;
  grid-template-columns: 2.6ch 1fr !important; /* 数字ぶんを少し広げる */
  column-gap: .7ch !important;
  padding-left: 0 !important;
  margin-bottom: 10px;
}

/* 数字(1.,2.,…)も少しだけ大きく */
main.comic-container .panel-yellow .speech-box .speech-line.number::before{
  font-size: 1.05em !important;
  position: static !important;
  min-width: 2.6ch;
  text-align: right;
}

/* 吹き出しボックス自体も“ひと回り”大きく見せる */
main.comic-container .panel-yellow .speech-box{
  max-width: 720px !important;   /* 横幅に余裕（PC時） */
  padding: 18px 22px !important; /* 余白を増やして“面積”UP */
}
main.comic-container{
  /* 以前: clamp(1.5rem, 3.2vw, 2.1rem) */
  --yellow-speech-size: clamp(1.30rem, 3.0vw, 1.85rem);
  --yellow-leading: 2.0; /* 行間は据え置き。高さを大きく変えない */
}

/* 念のため最終上書き（番号付き行に適用） */
main.comic-container .panel-yellow .speech-box .speech-line.number{
  font-size: var(--yellow-speech-size) !important;
  line-height: var(--yellow-leading) !important;
}

/* 数字(1.,2.,…)は本文と同スケールに */
main.comic-container .panel-yellow .speech-box .speech-line.number::before{
  font-size: 1em !important;
}
main.comic-container .panel-blue h2.impact-text.smaller{
  font-size: clamp(2.8rem, 6.2vw, 4.2rem) !important;
  line-height: 1.15 !important;
}

main.comic-container .panel-yellow h3.banner-text{
  font-size: clamp(2.9rem, 6.6vw, 4.6rem) !important;
  line-height: 1.12 !important;
}
  .hero-image{
    transform-origin: 50% 0 !important; /* top center */
    transform: scale(0.915) !important;
    clip-path: inset(65px 0 65px 0) !important;
    -webkit-clip-path: inset(65px 0 135px 0) !important; /* Safari対策 */
    margin-top: 0 !important; /* 念のため */
  }
    :root{
    --hero-clip-top: 135px;
    --hero-clip-bottom: 145px; /* ← Safariと同じにしたいなら 135px に */
  }

  .hero-image{
    transform-origin: 50% 0 !important; /* top center */
    transform: scale(0.915) !important;
    clip-path: inset(var(--hero-clip-top) 0 var(--hero-clip-bottom) 0) !important;
    -webkit-clip-path: inset(var(--hero-clip-top) 0 var(--hero-clip-bottom) 0) !important;

    /* カット量ぶんだけ上下のマージンをマイナスにして“詰める” */
    margin-top: calc(-1 * var(--hero-clip-top)) !important;
    margin-bottom: calc(-1 * var(--hero-clip-bottom)) !important;
  }
    :root{
    --hero-clip-top: 135px;
    --hero-clip-bottom: 145px;
    --hero-pull-extra: 80px; /* ← 下の白帯が消えるまで 50〜120px で微調整 */
  }

  .hero-image{
    display: block;
    vertical-align: top;
    transform-origin: 50% 0 !important; /* top center */
    transform: scale(0.915) !important;

    clip-path: inset(var(--hero-clip-top) 0 var(--hero-clip-bottom) 0) !important;
    -webkit-clip-path: inset(var(--hero-clip-top) 0 var(--hero-clip-bottom) 0) !important;

    /* カット量＋縮小で余る分だけ下をさらに詰める */
    margin-top: calc(-1 * var(--hero-clip-top)) !important;
    margin-bottom: calc(-1 * var(--hero-clip-bottom) - var(--hero-pull-extra)) !important;
  }

  /* ヒーロー直下のセクション側の余白もゼロに（保険） */
  main.comic-container{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
    :root{
    /* 上げ幅（以前は約34px）—お好みで 36〜56px くらい */
    --nar-lift:130px;
  }
  /* 三コマ領域だけに限定して上書き */
  main.comic-container .narration{
    position: relative !important;
    bottom: var(--nar-lift) !important;
    margin-bottom: calc(-1 * var(--nar-lift)) !important;
  }
    main.comic-container{
    margin-top: 12px !important;  /* ← ここを -20〜-40px で調整 */
  }
  /* 画像側は奥（下）に */
  .hero-image,
  .hero-extend{               /* hero-extend を使っていない場合は無視されます */
    position: relative;
    z-index: 0 !important;
  }

  /* 三コマ漫画側は手前（上）に */
  main.comic-container{
    position: relative;
    z-index: 2 !important;
    padding-top: 35px !important;  /* 1〜8pxで微調整：線が被るなら少し増やす */
  }
  :root{
    --nav-font-size: 1.18rem;   /* ← 文字の大きさ（1.12〜1.28remで微調整） */
    --nav-pad-y: 12px;          /* ← ナビの上下パディング */
    --nav-pad-x: 14px;          /* ← ナビの左右パディング */
    --header-side-pad: 24px;    /* ← ヘッダー左右の余白 */
    --logo-h: 56px;             /* ← ロゴ画像の高さ */
    --header-h: 96px;           /* ← アンカー用の見積り。JSで上書き可 */
  }

  header.header{
    padding: 16px var(--header-side-pad) !important;
    min-height: var(--header-h);               /* 体感を安定させる */
  }

  /* ロゴも少し大きく（必要なければ消してOK） */
  header.header .logo-group img{
    height: var(--logo-h) !important;
  }
  header.header .copy .line1,
  header.header .copy .line2{
    font-size: 0.95rem !important;             /* 調整したい場合は 0.9〜1.0rem */
  }

  /* ナビ文字＆クリック領域を拡大 */
  header.header #nav{
    gap: 16px !important;
    white-space: normal !important;            /* 折り返し許可（はみ出し対策） */
  }
  header.header #nav a{
    font-size: var(--nav-font-size) !important;
    padding: var(--nav-pad-y) var(--nav-pad-x) !important;
    line-height: 1.2 !important;
    border-radius: 10px;                        /* 見た目向上（任意） */
  }

  /* 見出しスクロール時にヘッダーで隠れないように */
  .panel{ scroll-margin-top: var(--header-h) !important; }
  :root{
    --nav-font-size: 1.55rem;   /* ★ナビの大きさ（1.18〜1.34remで調整） */
    --nav-pad-y: 12px;          /* クリックしやすい上下余白 */
    --nav-pad-x: 10px;

    --copy-line-size: 1.50rem;  /* ★「乗りたい車に / タダで乗れる」の大きさ */
    --copy-line-weight: 800;    /* 700〜900で好みの太さに */
  }

  /* ナビのテキストを拡大＆押しやすく */
  header.header #nav a{
    font-size: var(--nav-font-size) !important;
    padding: var(--nav-pad-y) var(--nav-pad-x) !important;
    line-height: 1.2 !important;
  }

  /* 左のコピー（2行）を拡大 */
  header.header .copy .line1,
  header.header .copy .line2{
    font-size: var(--copy-line-size) !important;
    font-weight: var(--copy-line-weight) !important;
    letter-spacing: .02em;
  }
    .badge{
    font-size: clamp(24px, 1.8vw, 36px) !important;   /* 文字サイズUP */
    padding: clamp(10px, .9vw, 16px) clamp(16px, 1.2vw, 26px) !important; /* 余白も比例UP */
    border-width: 3px !important;                     /* 太枠で見栄えUP（任意） */
    -webkit-text-stroke: 1.5px black !important;      /* ふち取り少し太く（任意） */
    /* 必要なら位置も微調整
    top: 8px !important;
    right: 4px !important;
    */
  }
   #income .reward-table{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: visible !important;   /* 横スクロールをやめる */
    box-sizing: border-box;
  }
  #income .reward-table table{
    width: 100% !important;
    table-layout: fixed;              /* 列幅をパネル幅で割り当て */
    border-collapse: collapse;
  }
  #income .reward-table th,
  #income .reward-table td{
    white-space: normal !important;   /* 折り返し可 */
    word-break: break-word !important;/* 長語でもはみ出さない */
    padding: clamp(10px, 1.1vw, 16px) !important; /* 余白もパネル幅に追従 */
  }
  /* 列比率（左:右 = 36:64）— 好みで 30/70 や 40/60 に */
  #income .reward-table tr > *:first-child{ width: 36% !important; }
  #income .reward-table tr > *:nth-child(2){ width: 64% !important; }
   /* 本体の文字サイズ＆行間をアップ */
  #income .reward-table th,
  #income .reward-table td{
    font-size: clamp(1.1rem, 1.2vw + 0.9rem, 1.45rem) !important;
    line-height: 1.9 !important;
    padding: clamp(14px, 1.3vw, 20px) clamp(14px, 1.6vw, 22px) !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* ヘッダー行はさらに強調（少しだけ大きく太く） */
  #income .reward-table th{
    font-size: clamp(1.2rem, 1.4vw + 1rem, 1.6rem) !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
  }

  /* テーブル自体はパネル幅いっぱいのまま */
  #income .reward-table,
  #income .reward-table table{
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  /* 好みで列比率（左:右）も少しワイドに */
  #income .reward-table tr > *:first-child{ width: 40% !important; }
  #income .reward-table tr > *:nth-child(2){ width: 60% !important; }
  /* ▼ 報酬体系テーブルだけ読みやすいフォントに */
#income .reward-table,
#income .reward-table *{
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic",
               "Meiryo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: .01em;                 /* 読みやすく微調整 */
  font-variant-numeric: tabular-nums;    /* 数字の桁揃え */
}
#income .reward-table,
#income .reward-table * {
  font-family: "Noto Sans JP", "BIZ UDPGothic",
               "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic Medium", "Yu Gothic", "Meiryo",
               system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;             /* 本文は太め（中太） */
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;      /* 数字の桁揃え */
  -webkit-font-smoothing: antialiased;     /* くっきり表示（WebKit） */
  text-rendering: optimizeLegibility;
}

/* 見出しセルはさらに太く */
#income .reward-table th {
  font-weight: 900 !important;             /* 極太 */
}

/* 強調テキスト（必要ならさらに強く） */
#income .reward-table td strong {
  font-weight: 900 !important;
}
 #consultation .image-row img{
    width: 100% !important;
    max-width: none !important;   /* ← インラインの 450px を無効化 */
    height: auto !important;
    box-sizing: border-box;       /* 枠線ぶんではみ出し防止 */
    display: block;
    margin: 0 !important;         /* 余白リセット（任意） */
  }
  /* トップ画像を少し縮小し、下部分の切り取りをなくす */
  :root{
    --hero-clip-top: 65px; /* 上はそのまま切り取る */
    --hero-clip-bottom: 0px; /* 下の切り取りをゼロにする */
    --hero-pull-extra: 0px; /* 下の余白の調整もゼロに */
  }

  .hero-image{
    /* 縮小設定は維持 */
    transform-origin: 50% 0 !important;
    transform: scale(0.915) !important;

    /* 新しい切り取りと余白設定を適用 */
    clip-path: inset(var(--hero-clip-top) 0 var(--hero-clip-bottom) 0) !important;
    -webkit-clip-path: inset(var(--hero-clip-top) 0 var(--hero-clip-bottom) 0) !important;
    margin-top: calc(-1 * var(--hero-clip-top)) !important;
    margin-bottom: calc(-1 * var(--hero-clip-bottom)) !important;
  }
  /* ここに共通のPC向けスタイルを追記します */
  /*body {
    transform: scale(0.8) !important;
    transform-origin: top center !important;
    width: calc(100% / 0.8) !important;
  }*/
}
  @media (min-width:1024px) and (max-width:1279px)and (hover: hover){
  /* 三コマのコンテナを2列グリッドに上書き */
  main.comic-container{
    display: grid !important;
    --comic-gap: 20px; /* 既存のgapが20pxなら合わせる。違えばここを調整 */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--comic-gap) !important;
  }

  /* 上段：左＝青、右＝緑（クラス名は実データに合わせて） */
  main.comic-container .panel-blue{  grid-column: 1 !important; }
  main.comic-container .panel-green{ grid-column: 2 !important; }

  /* 下段：黄色は中央に。見た目の幅は“1カラムぶん”でセンタリング */
  main.comic-container .panel-yellow{
    grid-column: 1 / -1 !important;           /* いったん2列ぶち抜き */
    justify-self: center !important;           /* センター配置 */
    width: calc((100% - var(--comic-gap)) / 2) !important; /* 1カラム相当の幅に */
    max-width: none !important;
  }
   main.comic-container{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--comic-gap, 20px) !important; /* 既存gapが違えばここを合わせる */
  }

  /* 1枚目・2枚目（クラスは実際に合わせて） */
  .panel-blue  { grid-column: 1 !important; }
  .panel-green { grid-column: 2 !important; }

  /* 3枚目（黄色）を中央に固定 */
  .panel-yellow{
    grid-column: 1 / -1 !important;                 /* 行を2列ぶち抜き */
    justify-self: center !important;                 /* 中央寄せ */
    width: min(720px, calc((100% - var(--comic-gap, 20px)) / 2)) !important; 
    /* ↑ 見た目は“1カラム相当”の幅。最大720pxは好みで調整 */
    max-width: none !important;
  }

  /* 保険：もしクラス名が違う/3枚目が特定できない場合 */
  main.comic-container > .comic-panel:nth-of-type(3){
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(720px, calc((100% - var(--comic-gap, 20px)) / 2)) !important;
  }
  /* モバイル用スタイルの影響を完全に無効化 */
  .mobile-nav,
  header.header #nav{
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;                 /* すき間を少し詰める */
    background: transparent !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;         /* ← 改行させない */
    white-space: nowrap !important;       /* ← 改行させない(テキストも) */
    margin-left: auto !important;         /* 右側へ寄せる */
  }
  .menu-toggle{ display:none !important; } /* 1024ではハンバーガー非表示 */

  /* リンクのサイズもこの幅だけ控えめに */
  header.header #nav a{
    border: 0 !important;
    padding: 6px 8px !important;
    font-size: clamp(0.9rem, 1.0vw, 1.05rem) !important;
    letter-spacing: .01em !important;
  }

  /* 左側キャッチの占有を抑える（2枚目の見た目に寄せる） */
  header.header{
    display:flex !important;
    align-items:center !important;
    gap: 16px !important;
  }
  header.header .logo-group{ flex:0 0 auto !important; }
  header.header .copy{
    flex:0 0 auto !important;
    max-width: 240px !important;          /* 横幅を控えめに固定 */
    white-space: nowrap !important;       /* 2行に折り返さない */
  }
  header.header .copy .line1,
  header.header .copy .line2{
    font-size: .9rem !important;          /* ほんの少し小さく */
    line-height: 1.1 !important;
  }

   /* ... 他のスタイルはそのまま ... */
 @media (min-width:1024px){
body {
    /* コンテンツを中央に配置する */
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% / 0.8); /* ここを修正 */

    /* コンテンツを80%に縮小する */
    transform: scale(0.8);
    transform-origin: top center;
  }
 }
}
@media (min-width: 1024px) {
    /* PCでは3列（横一列）に上書き */
    main.comic-container {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    /* 全てのコマを独立した1列として配置 */
    main.comic-container .comic-panel {
        grid-column: auto !important;
        width: auto !important;
    }
    
    /* 黄色いコマの「2列またぎ」を解除 */
    main.comic-container .panel-yellow {
        grid-column: auto !important;
        justify-self: auto !important;
        width: auto !important;
    }
}

/* 768px以上1023px以下は2列のまま維持 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    main.comic-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* 黄色いコマは2列またぎのまま */
    main.comic-container .panel-yellow {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
    }
}
/* === Firefox対策：Firefoxは zoom を無視する === */
@-moz-document url-prefix() {
  @media (min-width:1024px){
    body{
      transform: scale(.82);
      transform-origin: top center;
      width: calc(100% / .82); /* 縮小で狭くなるのを補正 */
    }
  }
}