/* === variables.css など共通領域 or style.css の最上部 === */
:root {
  --max-pc-width: 1200px;

.hero-section {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  gap: 40px;
  padding: 80px 40px;
  position: relative;
  background-color: var(--bglight);
}

.hero-section .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.hero-section .main-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.hero-section .text-wrapper {
  align-self: stretch;
  font-weight: var(--pc-h1-font-weight);
  color: var(--text);
  font-size: var(--pc-h1-font-size);
  text-align: center;
  line-height: var(--pc-h1-line-height);
  position: relative;
  font-family: var(--pc-h1-font-family);
  letter-spacing: var(--pc-h1-letter-spacing);
  font-style: var(--pc-h1-font-style);
}

.hero-section .div {
  position: relative;
  align-self: stretch;
  font-family: var(--pc-h3-font-family);
  font-weight: var(--pc-h3-font-weight);
  color: var(--bluemain);
  font-size: var(--pc-h3-font-size);
  text-align: center;
  letter-spacing: var(--pc-h3-letter-spacing);
  line-height: var(--pc-h3-line-height);
  font-style: var(--pc-h3-font-style);
}

.hero-section .simple-introduction {
  display: flex;
  flex-direction: column;
  width: 860px;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.hero-section .text-wrapper-2 {
  position: relative;
  align-self: stretch;
  font-family: var(--pc-text-font-family);
  font-weight: var(--pc-text-font-weight);
  color: var(--greydark);
  font-size: var(--pc-text-font-size);
  letter-spacing: var(--pc-text-letter-spacing);
  line-height: var(--pc-text-line-height);
  font-style: var(--pc-text-font-style);
}

.hero-section .frame {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.hero-section .note-article-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.hero-section .text-wrapper-3 {
  width: fit-content;
  font-weight: var(--pc-linktext-font-weight);
  color: var(--bluemain);
  font-size: var(--pc-linktext-font-size);
  line-height: var(--pc-linktext-line-height);
  text-decoration: underline;
  white-space: nowrap;
  position: relative;
  font-family: var(--pc-linktext-font-family);
  letter-spacing: var(--pc-linktext-letter-spacing);
  font-style: var(--pc-linktext-font-style);
}

.hero-section .text-wrapper-4 {
  position: relative;
  width: fit-content;
  font-family: var(--pc-text-small-font-family);
  font-weight: var(--pc-text-small-font-weight);
  color: var(--greydark);
  font-size: var(--pc-text-small-font-size);
  letter-spacing: var(--pc-text-small-letter-spacing);
  line-height: var(--pc-text-small-line-height);
  white-space: nowrap;
  font-style: var(--pc-text-small-font-style);
}


.features-section {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  gap: 40px;
  padding: 80px 40px;
  position: relative;
  background-color: var(--wh);
}

.features-section .section-header {
  display: flex;
  flex-direction: column;
  width: 800px;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.features-section .text-wrapper {
  position: relative;
  align-self: stretch;
  font-family: var(--pc-h2-font-family);
  font-weight: var(--pc-h2-font-weight);
  color: var(--text);
  font-size: var(--pc-h2-font-size);
  text-align: center;
  letter-spacing: var(--pc-h2-letter-spacing);
  line-height: var(--pc-h2-line-height);
  font-style: var(--pc-h2-font-style);
}

.features-section .div {
  position: relative;
  align-self: stretch;
  font-family: var(--pc-text-font-family);
  font-weight: var(--pc-text-font-weight);
  color: var(--greydark);
  font-size: var(--pc-text-font-size);
  text-align: center;
  letter-spacing: var(--pc-text-letter-spacing);
  line-height: var(--pc-text-line-height);
  font-style: var(--pc-text-font-style);
}

.features-section .main-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.features-section .steps-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.features-section .feature-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: var(--wh);
  border-radius: 16px;
  border: 1px solid;
  border-color: var(--line);
}

.features-section .step-badge {
  display: flex;
  width: 80px;
  height: 32px;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--bluemain);
  border-radius: 16px;
}

.features-section .text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-family: var(--pc-labeltext-font-family);
  font-weight: var(--pc-labeltext-font-weight);
  color: var(--wh);
  font-size: var(--pc-labeltext-font-size);
  letter-spacing: var(--pc-labeltext-letter-spacing);
  line-height: var(--pc-labeltext-line-height);
  white-space: nowrap;
  font-style: var(--pc-labeltext-font-style);
}

.features-section .feature-icon {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 160px;
  border-radius: 12px;
  background-image: url(./img/image.png);
  background-size: cover;
  background-position: 50% 50%;
}

.features-section .feature-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.features-section .text-wrapper-3 {
  position: relative;
  align-self: stretch;
  font-family: var(--pc-h4-font-family);
  font-weight: var(--pc-h4-font-weight);
  color: var(--text);
  font-size: var(--pc-h4-font-size);
  text-align: center;
  letter-spacing: var(--pc-h4-letter-spacing);
  line-height: var(--pc-h4-line-height);
  font-style: var(--pc-h4-font-style);
}

.features-section .text-wrapper-4 {
  align-self: stretch;
  height: 79px;
  font-family: var(--pc-text-small-font-family);
  font-weight: var(--pc-text-small-font-weight);
  color: var(--greydark);
  line-height: var(--pc-text-small-line-height);
  position: relative;
  font-size: var(--pc-text-small-font-size);
  letter-spacing: var(--pc-text-small-letter-spacing);
  font-style: var(--pc-text-small-font-style);
}

.features-section .feature-CTA {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--bluemain);
  border-radius: 8px;
}

.features-section .text-wrapper-5 {
  width: fit-content;
  font-family: var(--pc-buttontext-small-font-family);
  font-weight: var(--pc-buttontext-small-font-weight);
  color: var(--wh);
  line-height: var(--pc-buttontext-small-line-height);
  white-space: nowrap;
  position: relative;
  font-size: var(--pc-buttontext-small-font-size);
  letter-spacing: var(--pc-buttontext-small-letter-spacing);
  font-style: var(--pc-buttontext-small-font-style);
}

.features-section .feature-step-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--wh);
  border-radius: 16px;
  border: 1px solid;
  border-color: var(--line);
}

.features-section .feature-icon-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 160px;
  border-radius: 12px;
  background-image: url(./img/feature-icon.png);
  background-size: cover;
  background-position: 50% 50%;
}

.features-section .text-wrapper-6 {
  align-self: stretch;
  font-family: var(--pc-text-small-font-family);
  font-weight: var(--pc-text-small-font-weight);
  color: var(--greydark);
  line-height: var(--pc-text-small-line-height);
  position: relative;
  font-size: var(--pc-text-small-font-size);
  letter-spacing: var(--pc-text-small-letter-spacing);
  font-style: var(--pc-text-small-font-style);
}

.features-section .feature-icon-3 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 160px;
  border-radius: 12px;
  background-image: url(./img/feature-icon-3.png);
  background-size: cover;
  background-position: 50% 50%;
}

.features-section .feature-icon-4 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 160px;
  border-radius: 12px;
  background-image: url(./img/feature-icon-2.png);
  background-size: cover;
  background-position: 50% 50%;
}


.additional-features {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  gap: 40px;
  padding: 80px 40px;
  position: relative;
  background-color: var(--bglight);
}

.additional-features .additional-header {
  display: flex;
  flex-direction: column;
  width: 700px;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.additional-features .text-wrapper {
  position: relative;
  align-self: stretch;
  font-family: var(--pc-text-font-family);
  font-weight: var(--pc-text-font-weight);
  color: var(--greydark);
  font-size: var(--pc-text-font-size);
  text-align: center;
  letter-spacing: var(--pc-text-letter-spacing);
  line-height: var(--pc-text-line-height);
  font-style: var(--pc-text-font-style);
}

.additional-features .main-steps {
  display: flex;
  flex-direction: column;
  width: 1360px;
  align-items: center;
  justify-content: center;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.additional-features .steps-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.additional-features .feature-step {
  display: flex;
  flex-direction: column;
  width: 400px;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  position: relative;
  background-color: var(--wh);
  border-radius: 16px;
  border: 1px solid;
  border-color: var(--line);
}

.additional-features .step-badge {
  display: flex;
  width: 80px;
  height: 32px;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--green);
  border-radius: 16px;
}

.additional-features .div {
  position: relative;
  width: fit-content;
  font-family: var(--pc-labeltext-font-family);
  font-weight: var(--pc-labeltext-font-weight);
  color: var(--wh);
  font-size: var(--pc-labeltext-font-size);
  letter-spacing: var(--pc-labeltext-letter-spacing);
  line-height: var(--pc-labeltext-line-height);
  white-space: nowrap;
  font-style: var(--pc-labeltext-font-style);
}

.additional-features .feature-icon {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 180px;
  border-radius: 12px;
  background-image: url(./img/image.png);
  background-size: cover;
  background-position: 50% 50%;
}

.additional-features .feature-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.additional-features .text-wrapper-2 {
  align-self: stretch;
  font-family: var(--pc-h4-font-family);
  font-weight: var(--pc-h4-font-weight);
  color: var(--text);
  font-size: var(--pc-h4-font-size);
  text-align: center;
  line-height: var(--pc-h4-line-height);
  position: relative;
  letter-spacing: var(--pc-h4-letter-spacing);
  font-style: var(--pc-h4-font-style);
}

.additional-features .text-wrapper-3 {
  align-self: stretch;
  font-family: var(--pc-text-small-font-family);
  font-weight: var(--pc-text-small-font-weight);
  color: var(--greydark);
  font-size: var(--pc-text-small-font-size);
  line-height: var(--pc-text-small-line-height);
  position: relative;
  letter-spacing: var(--pc-text-small-letter-spacing);
  font-style: var(--pc-text-small-font-style);
}

.additional-features .feature-CTA {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--green);
  border-radius: 8px;
}

.additional-features .text-wrapper-4 {
  width: fit-content;
  font-family: var(--pc-buttontext-small-font-family);
  font-weight: var(--pc-buttontext-small-font-weight);
  color: var(--wh);
  font-size: var(--pc-buttontext-small-font-size);
  line-height: var(--pc-buttontext-small-line-height);
  white-space: nowrap;
  position: relative;
  letter-spacing: var(--pc-buttontext-small-letter-spacing);
  font-style: var(--pc-buttontext-small-font-style);
}

.additional-features .feature-icon-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 180px;
  border-radius: 12px;
  background-image: url(./img/feature-icon.png);
  background-size: cover;
  background-position: 50% 50%;
}


.content-section {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  gap: 40px;
  padding: 80px 40px;
  position: relative;
}

.content-section .content-container {
  display: flex;
  flex-direction: column;   /* モバイル時は縦積み */
  align-items: center;
  justify-content: center;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.content-section .articles-section {
  flex-direction: column;
  width: 580px;
  align-items: flex-start;
  gap: 28px;
  padding: 32px;
  background-color: var(--wh);
  border-radius: 12px;
  border: 1px solid;
  border-color: var(--line);
  display: flex;
  position: relative;
  align-self: stretch;
  flex: 1 1 0;              /* 以下、20250803追加。幅可変・同率配分 */
  max-width: 100%;          /* 580px 固定を打ち消し */
  width: 100% !important;   /* 既存 580px を優先的に上書き */
}

.content-section .articles-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  position: relative;
  align-self: stretch;
}

.content-section .text-wrapper {
  position: relative;
  align-self: stretch;
  font-family: var(--pc-h3-font-family);
  font-weight: var(--pc-h3-font-weight);
  color: var(--text);
  font-size: var(--pc-h3-font-size);
  letter-spacing: var(--pc-h3-letter-spacing);
  line-height: var(--pc-h3-line-height);
  font-style: var(--pc-h3-font-style);
}

.content-section .articles-list {
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  position: relative;
  align-self: stretch;
}

.content-section .article-item {
  height: 98px;
  align-items: center;
  gap: 16px;
  padding: 16px;
  align-self: stretch;
  width: 100%;
  border-radius: 8px;
  border: 1px solid;
  border-color: var(--line);
  display: flex;
  position: relative;
}

.content-section .article-content {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  flex-grow: 1;
  display: flex;
  position: relative;
}

.content-section .div {
  position: relative;
  align-self: stretch;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--text);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 19.2px;
}

.content-section .article-meta {
  align-items: center;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  position: relative;
}

.content-section .text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-family: var(--pc-text-small-font-family);
  font-weight: var(--pc-text-small-font-weight);
  color: var(--greydark);
  font-size: var(--pc-text-small-font-size);
  letter-spacing: var(--pc-text-small-letter-spacing);
  line-height: var(--pc-text-small-line-height);
  white-space: nowrap;
  font-style: var(--pc-text-small-font-style);
}

.content-section .articles-CTA {
  height: 44px;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: var(--bgblue);
  border-radius: 6px;
  display: flex;
  position: relative;
  align-self: stretch;
}

.content-section .text-wrapper-3 {
  width: fit-content;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--bluemain);
  font-size: 16px;
  line-height: 19.2px;
  white-space: nowrap;
  position: relative;
  letter-spacing: 0;
}

.content-section .text-wrapper-4 {
  align-self: stretch;
  font-family: var(--pc-text-small-font-family);
  font-weight: var(--pc-text-small-font-weight);
  color: var(--greydark);
  font-size: var(--pc-text-small-font-size);
  line-height: var(--pc-text-small-line-height);
  position: relative;
  letter-spacing: var(--pc-text-small-letter-spacing);
  font-style: var(--pc-text-small-font-style);
}


.header {
  display: flex;
  width: 1440px;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  padding: 0px 40px;
  position: relative;
  background-color: var(--bluemain);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--line);
}

.header .text-wrapper {
  position: relative;
  width: fit-content;
  font-family: var(--pc-h3-font-family);
  font-weight: var(--pc-h3-font-weight);
  color: var(--wh);
  font-size: var(--pc-h3-font-size);
  letter-spacing: var(--pc-h3-letter-spacing);
  line-height: var(--pc-h3-line-height);
  white-space: nowrap;
  font-style: var(--pc-h3-font-style);
}

.header .navbar {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  position: relative;
  flex: 0 0 auto;
}

.header .frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-color: var(--wh);
}

.header .div {
  position: relative;
  width: fit-content;
  margin-top: -2.00px;
  font-family: var(--pc-buttontext-bold-font-family);
  font-weight: var(--pc-buttontext-bold-font-weight);
  color: var(--wh);
  font-size: var(--pc-buttontext-bold-font-size);
  letter-spacing: var(--pc-buttontext-bold-letter-spacing);
  line-height: var(--pc-buttontext-bold-line-height);
  white-space: nowrap;
  font-style: var(--pc-buttontext-bold-font-style);
}

.header .text-wrapper-2 {
  font-family: var(--pc-buttontext-font-family);
  font-weight: var(--pc-buttontext-font-weight);
  color: var(--wh);
  line-height: var(--pc-buttontext-line-height);
  position: relative;
  width: fit-content;
  font-size: var(--pc-buttontext-font-size);
  letter-spacing: var(--pc-buttontext-letter-spacing);
  white-space: nowrap;
  font-style: var(--pc-buttontext-font-style);
}

.header .auth-section {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.header .login-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.header .log-in {
  position: relative;
  width: 18px;
  height: 18px;
  border: 0px none;
  border-color: var(--wh);
}

.header .overlap-group {
  position: relative;
  width: 15px;
  height: 15px;
  top: 2px;
  left: 2px;
}

.header .vector {
  position: absolute;
  width: 5px;
  height: 9px;
  top: 3px;
  left: 5px;
}

.header .img {
  position: absolute;
  width: 10px;
  height: 1px;
  top: 7px;
  left: 0;
}

.header .vector-2 {
  position: absolute;
  width: 6px;
  height: 15px;
  top: 0;
  left: 9px;
}

.header .register-button {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0px 28px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--wh);
  border-radius: 6px;
}

.header .text-wrapper-3 {
  font-family: var(--pc-buttontext-bold-font-family);
  font-weight: var(--pc-buttontext-bold-font-weight);
  color: var(--bluemain);
  line-height: var(--pc-buttontext-bold-line-height);
  position: relative;
  width: fit-content;
  font-size: var(--pc-buttontext-bold-font-size);
  letter-spacing: var(--pc-buttontext-bold-letter-spacing);
  white-space: nowrap;
  font-style: var(--pc-buttontext-bold-font-style);
}


/* style.css の末尾に追記 */

/* 1. の親コンテナを flex コンテキストにして上下を揃える */
.additional-features .steps-row {
  display: flex;              /* 子要素（カード）を横並びに */
  align-items: flex-start;    /* 上端をそろえる */
  gap: 24px;                  /* カード間の余白 */
}

/* 2. 各カードを縦方向に伸ばせるように flexbox 化 */
.additional-features .feature-step {
  display: flex;
  flex-direction: column;     /* 縦積み */
  flex: 1;                    /* 同じ比率で伸びる */
}

/* 3. カード内で「中身の縦揃え」が必要なら、.feature-content にも適用 */
.additional-features .feature-content {
  flex: 1;                    /* ボタンまで縦いっぱいに広げる */
}

.additional-features .feature-step {
  /* ★固定幅を廃止し、横幅をコンテナ幅の半分（gap分を引く）に */                               /* 元の定義（削除）） */  
   flex: 0 0 calc(25% - 12px);                   /* 親の gap:24px を考慮して左右12pxずつ余白を確保 */
   max-width: calc(25% - 12px);                  /* 同上 */
}


/* port_editの金額入力欄★ テーブルの全セルを上下中央揃え */
.table-responsive table td,
.table-responsive table th {
  vertical-align: middle !important;
}

/* ───────────────────────────────────────────────
   1. 固定幅 1440px を「上限 1440px ・普段は 100%」に置換
   ─────────────────────────────────────────────── */
:root {
  /* デザインガイドラインに合わせて上限を変えたい時はここを触る */
  --max-pc-width: 1440px;
}

/* 対象セクションをまとめて指定（重複セレクタなら !important でも可） */
.hero-section,
.features-section,
.additional-features,
.content-section,
.header     /* ヘッダーも対象 */
{
  width: 100%;
  max-width: var(--max-pc-width);
  margin-inline: auto;   /* 左右中央寄せ */
}

/* 子要素でまだ固定幅が残っているパーツも max-width 化 */
.hero-section .simple-introduction      { max-width: 860px; width: 100%; }
.additional-features .main-steps        { max-width: 1360px; width: 100%; }

/* PC 幅 (lg=992px〜) で記事、マガジンを横並び */
@media (min-width: 992px){
  .content-section .content-container{
    flex-direction: row;    /* ← 横並び */
  }
}

/* 1. セクション共通の上限幅と中央寄せ --------------------------- */
.hero-section,
.features-section,
.additional-features,
.content-section,
.header {
  width: 100%;
  max-width: var(--max-pc-width);
  margin-inline: auto; /* 左右中央寄せ */
}

/* 2. 子要素に固定幅が残っている場合は max-width に置換 ---------- */
.hero-section .simple-introduction {
  width: 100%;
  max-width: 860px; /* これ以上は伸びない */
}

/* 3. 横並びのコンテナは flex-basis を可変に ---------------------- */
.content-section .articles-section {
  flex: 1 1 0;
  max-width: 100%;
}

/* PC用スタイル終了*/

/* ───────────────────────────────────────────────
   既存の PC 向けスタイルはそのまま
   ここから下に「スマホ幅だけ」上書きする
   ─────────────────────────────────────────────── */
@media screen and (max-width: 767.98px) {

   /* ---------- Hero ---------- */
  .hero-section       { width: 100%; padding: 56px 20px; }
  .hero-section .text-wrapper   { font-size: 1.6rem; line-height: 1.3; }
  .hero-section .text-wrapper-2 { font-size: .9375rem; }

  /* ---------- 4 つの Feature ---------- */
  .features-section .steps-row { flex-direction: column; } /* row→縦積み */
  .feature-step                { max-width: 100%; }       /* カード全幅 */

  /* ---------- Additional Features ---------- */
  .additional-features .steps-row { flex-direction: column; }
  .additional-features .feature-step { max-width: 100%; }

  /* ---------- 記事 & マガジン ---------- */
  /* 2 カラム→縦 1 カラムに */
  .content-section .articles-section { max-width: 100%; }


  /* 1. 横パディングを縮める ----------------------------- */
  .hero-section,
  .features-section,
  .additional-features{
    padding-inline: 20px;          /* 40px → 20px */
  }

  /* 2. 残っている固定幅を解除 --------------------------- */
  .hero-section .simple-introduction,
  .features-section .section-header,
  .additional-features .section-header{
    width: 100%;
    max-width: 100%;               /* 860px などを打ち消す */
  }

  /* 3. 文字サイズを可変にする --------------------------- */
  .text-wrapper,          /* 大きい見出し */
  .section-header h2{     /* セクション見出し */
    font-size: clamp(1.4rem, 6vw, 2rem);
    line-height: 1.3;
  }
  .text-wrapper-2,        /* サブタイトルなど */
  .text-wrapper-4{
    font-size: clamp(.9rem, 4vw, 1rem);
  }

  /* 4. 強制改行が必要なら wrap を許可 ------------------- */
  .hero-section,
  .features-section,
  .additional-features{
    overflow-wrap: break-word;
    word-break: break-word;        /* 長い日本語も折り返す */
  }
}

/* 4. モバイル向け Overflow & Wrapping 調整 ---------------------- */
@media (max-width: 767.98px) {
  /* 各セクションのパディングを縮小 */
  .hero-section,
  .features-section,
  .additional-features {
    padding-inline: 20px;
  }

  /* テキストコンテナを親幅に追従 */
  .hero-section .main-message,
  .hero-section .simple-introduction,
  .features-section .text-wrapper-3,
  .features-section .text-wrapper-4 {
    width: 100%;
    max-width: 100%;
  }

  /* テキストの改行・折返し許可 */
  .hero-section .text-wrapper,
  .hero-section .text-wrapper-2,
  .features-section .text-wrapper-3,
  .features-section .text-wrapper-4 {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }

  /* 可変フォントで読みやすく */
  .hero-section .text-wrapper {
    font-size: clamp(1.4rem, 6vw, 2rem);
    line-height: 1.3;
  }
  .hero-section .text-wrapper-2 {
    font-size: clamp(1rem, 4vw, 1.2rem);
  }
  .features-section .text-wrapper-3,
  .features-section .text-wrapper-4 {
    font-size: clamp(1rem, 4vw, 1.1rem);
  }

  /* 4. モバイル向け Overflow & Wrapping 調整 ---------------------- */
@media (max-width: 767.98px) {
  /* 各セクションのパディングを縮小 */
  .hero-section,
  .features-section,
  .additional-features {
    padding-inline: 16px;
  }

  /* テキストコンテナを親幅に追従 */
  .hero-section .wrapper,
  .hero-section .main-message,
  .hero-section .text-wrapper,
  .hero-section .text-wrapper-2,
  .features-section .text-wrapper-3,
  .features-section .text-wrapper-4 {
    width: 100%;
    max-width: 100%;
  }

  /* テキストの改行・折返し許可 */
  .hero-section .wrapper,
  .hero-section .main-message,
  .hero-section .text-wrapper,
  .hero-section .text-wrapper-2,
  .features-section .text-wrapper-3,
  .features-section .text-wrapper-4 {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }

  /* 可変フォントで読みやすく */
  .hero-section .text-wrapper {
    font-size: clamp(1.2rem, 7vw, 1.8rem);
    line-height: 1.3;
  }
  .hero-section .text-wrapper-2 {
    font-size: clamp(1rem, 5vw, 1.4rem);
  }
  .features-section .text-wrapper-3,
  .features-section .text-wrapper-4 {
    font-size: clamp(1rem, 4vw, 1.1rem);
  }
}



/* 4. モバイル向け Overflow & Wrapping 調整 ---------------------- */
@media (max-width: 767.98px) {
  /* 各セクションのパディングを縮小 */
  .hero-section,
  .features-section,
  .additional-features {
    padding-inline: 16px;
  }

  /* テキストコンテナを親幅に追従 */
  .hero-section .wrapper,
  .hero-section .main-message,
  .hero-section .text-wrapper,
  .hero-section .text-wrapper-2,
  .hero-section .note-article-link,
  .features-section .text-wrapper-3,
  .features-section .text-wrapper-4, 
  .features-section .additional-header,
  .additional-features p,                        /* pタグで書いている場合 */
  .additional-features .section-description,    /* 任意の説明用クラス名 */
  .additional-features .text-wrapper-3,
  .additional-features .text-wrapper-4 {
    width: 100%;
    max-width: 100%;
  }

  /* テキストの改行・折返し許可 */
  .hero-section .wrapper,
  .hero-section .main-message,
  .hero-section .text-wrapper,
  .hero-section .text-wrapper-2,
  .hero-section .note-article-link,
  .features-section .text-wrapper-3,
  .features-section .text-wrapper-4, 
  .features-section .additional-header,
  .additional-features p,                        /* pタグで書いている場合 */
  .additional-features .section-description,    /* 任意の説明用クラス名 */
  .additional-features .text-wrapper-3,
  .additional-features .text-wrapper-4 {  
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }

  /* 可変フォントで読みやすく */
  .hero-section .text-wrapper {
    font-size: clamp(1.7rem, 5vw, 1.7rem);
    line-height: 1.3;
  }
  .hero-section .text-wrapper-2 {
    font-size: clamp(0.9rem, 3vw, 1.2rem);
  }

  .features-section .text-wrapper-3,
  .features-section .text-wrapper-4,
  .additional-features .text-wrapper-3,
  .additional-features .text-wrapper-4
   {font-size: clamp(1rem, 4vw, 1.3rem);}

   /* === 2025-08-03 モバイルの文字はみ出し修正 ===================== */
@media (max-width: 767.98px) {

  /* ---------- 横パディングをさらに圧縮 ---------- */
  .hero-section,
  .features-section,
  .additional-features { padding-inline: 12px; }

  /* ---------- ヒーロー ----------------------------------------- */
  /* 固定幅を打ち消し */
  .hero-section,
  .hero-section .simple-introduction,
  .hero-section .wrapper,
  .hero-section .main-message          { width: 100%; max-width: 100%; }

  /* 行を強制的に折り返す */
  .hero-section .text-wrapper,
  .hero-section .text-wrapper-2,
  .hero-section .text-wrapper-3,
  .hero-section .text-wrapper-4        {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }

  /* フォントをさらに可変に */
  .hero-section .text-wrapper          { font-size: clamp(1.8rem, 4vw, 1.8rem); }
  .hero-section .text-wrapper-2        { font-size: clamp(0.9rem, 4vw, 0.9rem); }
  .features-section .text-wrapper      { font-size: clamp(1.2rem, 4vw, 1.2rem); }


  /* ---------- Features & Additional Features ------------------- */
  /* セクション見出し & 説明文を親幅に合わせる */
  .features-section .section-header,
  .additional-features .additional-header,
  .features-section .div,                 /* 説明文 */
  .additional-features .text-wrapper,
  .additional-features .text-wrapper-3    {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }

  .features-section .div,
  .additional-features .text-wrapper,
  .additional-features .text-wrapper-3    {
    font-size: clamp(0.9rem, 4vw, 1rem);
    line-height: 1.45;
  }

/* ────────── Articles & Magazines Lists ────────── */
  .articles-section .articles-header .text-wrapper,
  .articles-section .text-wrapper, /* セクション見出し */
  .articles-section .article-item a,
  .articles-section .article-item .div,
  .articles-section .article-item .text-wrapper-4,
  .articles-section .magazine-item a,
  .articles-section .magazine-item .div,
  .articles-section .magazine-item .text-wrapper-4 {
    font-size: clamp(0.7rem, 3vw, 0.8rem);
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }
  .articles-section .articles-header .text-wrapper {
    font-size: clamp(1rem, 5vw, 1.2rem);
  }

}