body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #151515;
    background-color: #fff;
    font-size: 18px;
      font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
    margin-inline: auto;
}

a{
  display: block;
}

.serif{
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    line-height: 2;
}
.border-main{
    border: 1px solid #3EB489;
    background-color: #fff;
}
.base-main{
    background-color: #3EB489;
    color: #fff;
}
.base-akcent{
    background-color: #ED765B;
    color: #fff;
}
.base-akcent2{
    background-color: #F4F4F5;
}
.base-y{
    background-color: #FFEB3B;
    color: #151515;
}
.base-gray{
    background-color: #D9D9D9;
}

.base-white{
    background-color: #FFFFFF;
    color: #151515;
}
.color-strong{
    color: #FF2000;
}
.color-akcent{
    color: #FFF26D;
}
.color-main{
    color: #3EB489;
}
.color-main2{
    color: #268b66;
}
.f-base {
  /* 18px → 16px にスケール */
  font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 375px) / 1500)), 18px);
}
.f-md-s {
  /* 24px → 20px にスケール */
  font-size: clamp(18px, calc(18px + (24 - 18) * ((100vw - 375px) / 1500)), 24px);
}
.f-md-m {
  /* 28px → 22px にスケール */
  font-size: clamp(18px, calc(18px + (28 - 18) * ((100vw - 375px) / 1500)), 28px);
}
.f-md-l {
  /* 36px → 28px にスケール */
  font-size: clamp(28px, calc(28px + (36 - 28) * ((100vw - 375px) / 1500)), 36px);
}
.f-lg {
  /* 48px → 28px にスケール。中間でより小さめを維持するために成長率を緩める（分母を大きく） */
  font-size: clamp(22px, calc(22px + (48 - 22) * ((100vw - 375px) / 1500)), 48px);
}



.b-main{
    border: 1px solid #3EB489;
}

/* margin-top: 40px (PC) / 20px (SP) 4080160*/
.mt-md {
  margin-top: clamp(1.25rem, 1.25rem + 1vw, 2.5rem);
}
.mt-lg {
  margin-top: clamp(2.5rem, 2.5rem + 3vw, 5rem);
}
.mt-xl {
  margin-top: clamp(5rem, 5rem + 8vw, 10rem);
}
.flex-0{
  display: flex;
  flex-wrap: wrap;
      align-items: stretch;}

.flex{
    display: flex;
     flex-wrap: wrap;  
      align-items: stretch;
      justify-content: space-around;
      align-content: center; /* 折り返した行をコンテナ中央に揃える */

}
.flex-3{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3等分、可変幅 */
    gap: 40px; /* 行・列ともに40pxの隙間 */
    align-items: stretch; /* 子要素の高さを揃える */
    width: 100%;
    box-sizing: border-box;
}

img{
    display: block;
}
.img-box{
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.center{
  text-align: center;
}
.btn-1{
  border-radius: 999em;
box-shadow: #FF2000 0px 4px 0px;
padding: 8px 5%;
}

.pt-80 {
    /* 6vw が 40px になるのは幅 ~666px。必要に応じて調整 */
    padding-block: clamp(40px, 6vw, 80px);
}
.pt-24 {
  /* 縦方向（上下）: 最小16px、最大24px、間はviewportで調整 */
  padding-block: clamp(16px, 1.6vw, 24px);
}
.pt-40 {
  /* 縦方向（上下）: 最小20px、最大40px、間はviewportで調整 */
  padding-block: clamp(20px, 3.2vw, 40px);
}
.pw-80 {
  /* 横方向（左右）: 最小40px、最大80px、間はviewportで調整 */
  padding-inline: clamp(40px, 6vw, 80px);
}
.pw-40 {
  /* 横方向（左右）: 最小10px、最大40px、間はviewportで調整 */
  padding-inline: clamp(10px, 3.2vw, 40px);
}
.mb-24{
  /* 下マージン: 最小12px、最大24px、間はviewportで調整 */
  margin-bottom: clamp(12px, 1.6vw, 24px);
}
.pw-24 {
  /* 横方向（左右）: 最小6px、最大24px、間はviewportで調整 */
  padding-inline: clamp(6px, 1.6vw, 24px);
}
.mb-80 {
  /* 下マージン: 最小40px、最大80px、間はviewportで調整 */
  margin-bottom: clamp(40px, 6vw, 80px);
}
.mb-40 {
  /* 下マージン: 最小20px、最大40px、間はviewportで調整 */
  margin-bottom: clamp(20px, 6vw, 40px);
}
.mw-40 {
  /* 横方向（左右）マージン: 最小10px、最大40px、間はviewportで調整 */
  margin-inline: clamp(10px, 3.2vw, 40px);
}
.mb-16 {
  /* 下マージン: 最小8px、最大16px、間はviewportで調整 */
  margin-bottom: clamp(8px, 1.6vw, 16px);

}


  /* スマートフォン（最大600px）用のスタイル */
  @media (max-width: 800px) {
    .flex-3 {
      grid-template-columns: 1fr; /* 1列表示に変更 */
      gap: 20px; /* 隙間を20pxに調整 */
    }
  }



ul, ol {
  margin: 0 0 1rem 0;
  padding-inline-start: 1.25rem; /* 必要に応じて増減 */
  /* 古いブラウザ対応 */
  padding-left: 1.25rem;
  list-style-position: outside; /* マーカーを項目外に表示（標準） */
  box-sizing: border-box;
 list-style: none;
}
a {
    color: initial;
    cursor: pointer;
    text-decoration: none;

}

table, tbody, tr, td, th {
 display: block;
}
tr {
 display: flex;
 flex-wrap: wrap;
}

th{
  flex-basis: 30%;
}


/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-system-colors-mode="light">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-system-colors-mode="light"] {
  --system-colors-miscellaneous-floating-tab-text-unselected: rgba(9, 9, 9, 1);
}

[data-system-colors-mode="dark"] {
  --system-colors-miscellaneous-floating-tab-text-unselected: rgba(
    171,
    171,
    177,
    0.93
  );
}

[data-system-colors-mode="dark-elevated"] {
  --system-colors-miscellaneous-floating-tab-text-unselected: rgba(
    171,
    171,
    177,
    0.93
  );
}

[data-system-colors-mode="IC-light"] {
  --system-colors-miscellaneous-floating-tab-text-unselected: rgba(9, 9, 9, 1);
}

[data-system-colors-mode="IC-dark"] {
  --system-colors-miscellaneous-floating-tab-text-unselected: rgba(
    171,
    171,
    177,
    0.93
  );
}

[data-system-colors-mode="IC-dark-elevated"] {
  --system-colors-miscellaneous-floating-tab-text-unselected: rgba(
    171,
    171,
    177,
    0.93
  );
}

@media (max-width: 600px) {
.flex-3 > *{
    box-sizing: border-box;
    /* 必要なら以下を調整 */
    /* padding: 16px; */
    /* background: #fff; */
}

}