/* ===============================
   #section-1 の全体レイアウト
================================ */
/* section-1 を中央配置 */
#section-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacer);
  padding: var(--spacer);
  position: relative;
  padding-bottom:74%;
}

/* ===============================
   タイトル (h1) のスタイル
================================ */
#section-1 h1 {
  position: relative;
  z-index: 2; /* テキストを背景画像の上に配置 */
  line-height:0.8;
}

#section-1 .title-pre {
  font-size: 1.25rem;
  line-height: 1.4 !important;
}

#section-1 .title-main {
  font-size: 1.75rem;
  color: var(--color-orange);
  line-height: 1.4 !important;
}

/* ===============================
   head-menu のスタイル
================================ */
#section-1 .head-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacer);
  position: relative;
  z-index: 2; /* メニューのテキストを背景画像の上に配置 */
  padding: var(--spacer);
}

/* head-menu の背景ハイライト */
#section-1 .head-menu p span::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: -0.05em;
  width: 2rem;
  height: 2em;
  background: linear-gradient(transparent 60%, rgba(242, 112, 27, 0.10) 60%);
}

@media (min-width: 768px) {
  #section-1 .head-menu p span::before {
    left: -2.5rem;
    width: 2.5rem;
  }
  #section-1 .head-menu p span::after {
    right: -2.5rem;
    width: 2.5rem;
  }
}

@media (min-width: 992px) {
  #section-1 .head-menu p span::before {
    left: -3rem;
    width: 3rem;
  }
  #section-1 .head-menu p span::after {
    right: -3rem;
    width: 3rem;
  }
}

/* head-menu 内のテキスト */
#section-1 .head-menu p {
  font-size: 1rem;
  position: relative;
  padding-left: 2rem;  /* アイコン用のスペース */
}
#section-1 .head-menu p span {
  display: inline;
  position: relative;
  padding: 0.25em 0;
  background: linear-gradient(transparent 60%, rgba(242, 112, 27, 0.10) 60%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.10);
}

/* ===============================
   head-menu のアイコン (SVG)
================================ */
/* 各 p の前に SVG アイコンを挿入 */
#section-1 .head-menu p::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--color-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 40' fill='%23f2701b'%3E%3Cpath d='M4.83333 39.5C3.64167 39.5 2.62153 39.0757 1.77292 38.2271C0.924306 37.3785 0.5 36.3583 0.5 35.1667V4.83333C0.5 3.64167 0.924306 2.62153 1.77292 1.77292C2.62153 0.924306 3.64167 0.5 4.83333 0.5H35.1667C35.4556 0.5 35.7264 0.527083 35.9792 0.58125C36.2319 0.635417 36.4847 0.716667 36.7375 0.825L32.7292 4.83333H4.83333V35.1667H35.1667V20.7583L39.5 16.425V35.1667C39.5 36.3583 39.0757 37.3785 38.2271 38.2271C37.3785 39.0757 36.3583 39.5 35.1667 39.5H4.83333ZM18.9708 30.8333L6.72917 18.5917L9.7625 15.5583L18.9708 24.7667L38.85 4.8875L41.9375 7.86667L18.9708 30.8333Z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 40' fill='%23f2701b'%3E%3Cpath d='M4.83333 39.5C3.64167 39.5 2.62153 39.0757 1.77292 38.2271C0.924306 37.3785 0.5 36.3583 0.5 35.1667V4.83333C0.5 3.64167 0.924306 2.62153 1.77292 1.77292C2.62153 0.924306 3.64167 0.5 4.83333 0.5H35.1667C35.4556 0.5 35.7264 0.527083 35.9792 0.58125C36.2319 0.635417 36.4847 0.716667 36.7375 0.825L32.7292 4.83333H4.83333V35.1667H35.1667V20.7583L39.5 16.425V35.1667C39.5 36.3583 39.0757 37.3785 38.2271 38.2271C37.3785 39.0757 36.3583 39.5 35.1667 39.5H4.83333ZM18.9708 30.8333L6.72917 18.5917L9.7625 15.5583L18.9708 24.7667L38.85 4.8875L41.9375 7.86667L18.9708 30.8333Z'/%3E%3C/svg%3E") no-repeat center;
  position: absolute;
  left: 0;
  top: 0.7em;  /* 最初の行の中央に合わせる */
  transform: translateY(-35%);  /* 垂直中央配置を復活 */
}
@media (min-width: 768px) {
  #section-1 .head-menu p {
    padding-left: 2.5rem;
  }
  
  #section-1 .head-menu p::before {
    width: 1.75rem;
    height: 1.75rem;
  }
}
@media (min-width: 992px) {
  #section-1 .head-menu p {
    padding-left: 3.5rem;
  }
  
  #section-1 .head-menu p::before {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* ===============================
   メインイメージ
================================ */
  /* 背景画像を配置し、head-left と重なる */
  #section-1::before {
    content: "";
    position: absolute;
    right: 0px;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/top/intro.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    z-index: 1; /* 背景をテキストの背面に配置 */
  }

/* ===============================
   大画面 (≥lg) のレイアウト調整
================================ */
@media (min-width: 992px) {
  #section-1 {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-bottom:var(--spacer);
  }
  #section-1 .head-left {
    flex: 1;
    /*padding: var(--spacer);*/
    position: relative;
    z-index: 2; /* テキストを背景画像の上に配置 */
  }

  /* 背景画像を配置し、head-left と重なる */
  #section-1::before {
    content: "";
    position: absolute;
    right: -60px;
    top: 0;
    width: 48%;
    height: 100%;
    background-position: right 20%;
    /*opacity: 0.9;*/
    z-index: 1; /* 背景をテキストの背面に配置 */
  }
}

#section-2 h2{
  font-size: 1.75rem;
}
#section-2 h3{
  font-size: 1rem;
}
#section-2 .btn{
  border-radius:0.5rem;
  font-size: 1rem;
}
#section-2 .intro{
  font-size: 0.85rem;
}
@media (min-width: 768px) {
  #section-2 .intro{
    font-size: 1rem;
  }

}

#section-3 h2{
  font-size: 1.75rem;
}
#section-3 h3{
  font-size: 1rem;
}
#section-3 li{
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  #section-3 li{
    font-size: 1rem;
  }

}
/* ===============================
   レスポンシブレイアウト調整
================================ */
@media (min-width: 768px) {
  #section-1 .title-pre {
    font-size: 1.75rem;;
  }
  
  #section-1 .title-main {
    font-size: 2.25rem;
  }
  /* head-menu 内のテキスト */
  #section-1 .head-menu p {
    font-size: 1.25rem;
  }
}
@media (min-width: 992px) {
  #section-1 .title-pre {
    font-size: 2rem;
  }
  
  #section-1 .title-main {
    font-size: 2.4rem;
  }
  /* head-menu 内のテキスト */
  #section-1 .head-menu p {
    font-size: 1.75rem;
  }
}
@media (min-width: 992px) {
  #section-2 h2{
    font-size: 2.75rem;
  }
  #section-2 h3{
    font-size: 1.5rem;
    min-height:4.8125rem;
  }
  #section-2 .btn{
    border-radius:0.65rem;
    font-size: 1.25rem;
  }
}
@media (min-width: 992px) {
  #section-3 h2{
    font-size: 2.75rem;
  }
  #section-3 h3{
    font-size: 1.25rem;
  }

}
@media (min-width: 1400px) { 
  #section-1 .title-main {
    font-size: 3.25rem;
  }
  /* head-menu 内のテキスト */
  #section-1 .head-menu p {
    font-size: 2rem;
  }
}