@charset "UTF-8";

/* **************************************************

Name: textboxStyle.css
Description: CSS for text box Style
Create: 2026.04.24
Update: 

***************************************************** */
/*  4連の横並び表示、ヘッダ青
  ----------------------------------------------------------*/
.introduce {
  display: flex;
  align-items: stretch;  /* 高さを揃える */
  gap: 16px;
  width: 95%;
  margin: 20px auto;
}
.introduce .redcircle {
  width: 75px;
  height: 75px;
  background-color: #CC0000;
  border-radius: 50%;

  color: #fff;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-weight: bold;
}

.introduce .redcircle .number {
  font-size: 1.5em;   /* 数字を大きめに */
  line-height: 1;
  margin-top: 4px;   /* STEPとの間隔調整 */
}

.introduce .introarrow {
  font-size: 200%;
}

/* 各ボックス */
.introduce .introbox {
  border: 1px solid #0C0C0C;   /* 黒線で囲む */
  padding: 16px;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 矢印 */
.introduce .introarrow {
  font-size: 24px;
}

.introduce .introarticle {
  flex-direction: row;
}
/* タイトル */
.introduce .introTitle {
  font-weight: 500;
  font-size: 1.2em;   /* 少し大きめ */
  margin-top: 15px;
  margin-bottom: 10px;
  text-align: center;
}

/* 説明文 */
.introduce .introText {
  font-size: 1.0em;
  margin-top: 4px;
}
.introduce .introarrow {
  align-self: center;  /* 縦中央 */
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #B3B3B3;
}

@media (max-width: 767px) {
  
  /* 全体を縦並び */
  .introduce {
    flex-direction: column;
    align-items: center;
  }

  /* introbox 幅を広げる（スマホ向け） */
  .introduce .introbox {
    flex-direction: row;       /* 横並び */
    align-items: center;
    text-align: left;
    width: 100%;
  }

  .introduce .redcircle {
    margin: 0 12px 0 0;        /* 右側に余白 */
    flex-shrink: 0;            /* 小さくならないように */
  }

  .introduce .introTitle,
  .introduce .introText {
    align-self: flex-start;
  }

  .introduce .introTitle {
    margin-top: 0;
    text-align: left;
  }

  /* ▼ 下向き矢印に変更 */
  .introduce .introarrow {
    width: 0;
    height: 0;
    margin: 8px 0;

    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 18px solid #B3B3B3;

    border-bottom: none;
  }
}

/*  4連の縦並び表示、ヘッダ青
  ----------------------------------------------------------*/
  .introduceV {
  display: flex;
  flex-direction: column;
  align-items: stretch;  /* 高さを揃える */
  gap: 16px;
  width: 95%;
  margin: 20px auto;
}

.introduceV .redcircle {
  width: 75px;
  height: 75px;
  background-color: #CC0000;
  border-radius: 50%;
  margin-right: 20px;
  color: #fff;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-weight: bold;
}

.introduceV .redcircle .number {
  font-size: 1.5em;   /* 数字を大きめに */
  line-height: 1;
  margin-top: 4px;   /* STEPとの間隔調整 */
}

.introduceV .introarrow {
  font-size: 200%;
}

/* 各ボックス */
.introduceV .introbox {
  /* border: 1px solid #0C0C0C;   /* 黒線で囲む */
  padding: 16px;
  /*width: 180px;*/
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 89%;
}

/* 矢印 */
.introduceV .introarrow {
  font-size: 24px;
}

.introduceV .introarticle {
  flex-direction: row;
  border: 1px solid #0C0C0C;   /* 黒線で囲む */
  width: 89%;


}
/* タイトル */
.introduceV .introTitle {
  font-weight: 500;
  font-size: 1.2em;   /* 少し大きめ */
  margin-top: 15px;
  margin-bottom: 10px;
  text-align: left;
  padding: 10px 20px;
}

.introduceV .introTitle span.itemLabel {
  position: absolute;
  right: calc(100vw - 450px);
  color: #FA000F;
  font-size: 0.7em;
  border: 1px solid #FA000F;
  border-radius: 8px;
  width: 100px;
  text-align: center;
}

@media (max-width: 600px) {
  .introduceV .introTitle span.itemLabel {
    right: 10%;
    left: auto;
  }
}

@media (min-width: 996px) {
  .introduceV .introTitle span.itemLabel {
    right: calc(100vw * 0.52);
    left: auto;
  }
}

/* 説明文 */
.introduceV .introText {
  font-size: 1.0em;
  margin-top: 4px;
  padding: 0px 20px 20px;

}
.introduceV .introarrow {
  align-self: center;  /* 縦中央 */
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #B3B3B3;
}

@media (max-width: 767px) {
  
  /* 全体を縦並び */
  .introduceV {
    flex-direction: column;
    align-items: center;
  }

  /* introbox 幅を広げる（スマホ向け） */
  .introduceV .introbox {
    flex-direction: row;       /* 横並び */
    align-items: center;
    text-align: left;
    width: 100%;
  }

  .introduceV .redcircle {
    margin: 0 12px 0 0;        /* 右側に余白 */
    flex-shrink: 0;            /* 小さくならないように */
  }

  .introduceV .introTitle,
  .introduceV .introText {
    align-self: flex-start;
  }

  .introduceV .introTitle {
    margin-top: 0;
    text-align: left;
  }

  /* ▼ 下向き矢印に変更 */
  .introduceV .introarrow {
    width: 0;
    height: 0;
    margin: 8px 0;

    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 18px solid #B3B3B3;

    border-bottom: none;
  }
}


/*  2連の縦並び表示、ヘッダ青
  ----------------------------------------------------------*/
/* 全体 */
.attention {
  display: flex;
  justify-content: space-evenly;
  gap: 20px;
  align-items: stretch; /* 高さを揃える */
}

/* 各ボックス */
.attentbox {
  display: flex;
  flex-direction: column;
  flex: 1;               /* 横幅均等 */
  max-width: 42%;
  border: 1px solid #0c0c0c;
  padding: 0px;
  box-sizing: border-box;
}

/* タイトルエリア */
.titleBlueback {
  background-color: #0066cc;
  color: #ffffff;
  font-weight: bold;
  padding: 10px;
  font-size: 1.2em;
  text-align: center;
}

/* サブテキスト */
.titleBlueback span.subtext {
  display: block;
  font-size: 0.8em;
  margin-top: 4px;
}

/* 注目点エリア */
.attentItem {
  margin: 20px auto 0px;        /* タイトルと詳細の間を20px */
  text-align: center;
}

/* メイン注目点 */
.attentMain {
  font-weight: bold;
  color: #CC0000;
  font-size: 1.2em;
}

/* サブ注目点 */
.attentSub {
  font-weight: bold;
  color: #0C0C0C;
  font-size: 1.0em;
  margin-top: 6px;
}

/* 詳細テキスト */
.detailText {
  font-size: 1em;
  line-height: 1.6;
  color: #0C0C0C;
  margin-top: 0;     /* 高さ揃え用（下に揃える） */
  padding: 20px;
}

/* ---------- レスポンシブ：560px以下 ---------- */
@media screen and (max-width: 560px) {
  .attention {
    flex-direction: column; /* 縦並び */
  }

  .attentbox {
    width: 100%;
    max-width: unset;

  }
}

/*  spetial style
  ----------------------------------------------------------*/
span.attentColor {
  color: #CC0000;
  font-weight: 500;
}