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

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

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

#section-1 .title-main {
  font-size: 1.75rem;
  color: var(--color-dark-blue);
  line-height: 1.4 !important;
}
@media (min-width: 768px) {
  #section-1 h1 {
    text-align:left;
  }
}

/* ===============================
    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%, rgb(31, 120, 229, 0.1) 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(31, 120, 229, 0.1) 60%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.10);
}

@media (max-width: 395px) {

  #section-1 .head-menu p span{
    font-size:0.85rem
  }

}  

#section-1 .head-menu p span.word-nowrap.underline_fix{
  display: unset;
  left: 0rem;
  background: none;
}
#section-1 .head-menu p span.word-nowrap.underline_fix::before,
#section-1 .head-menu p span.word-nowrap.underline_fix::after{
  display: none
}

/* ===============================
    head-menu のアイコン (SVG)
================================ */
#section-1 .head-menu p::before  {/*アイコン設定：1つ目*/
  content: "";
  width: 2.4rem;
  height:2.4rem;
  position: absolute;
  z-index: 2;
  left: -4px;
  top: 0.6em; /* 最初の行の中央に合わせる */
  transform: translateY(-35%);  /* 垂直中央配置を復活 */
}
#section-1 .head-menu p:nth-child(1)::before  {/*アイコン設定：1つ目*/
  background: url(../images/nyukyo/intro_1.svg) no-repeat;
  background-size:contain;
}
#section-1 .head-menu p:nth-child(2)::before  {/*アイコン設定：2つ目*/
  background: url(../images/nyukyo/intro_2.svg) no-repeat;
  background-size:contain;
}
#section-1 .head-menu p:nth-child(3)::before  {/*アイコン設定：3つ目*/
  background: url(../images/nyukyo/intro_3.svg) no-repeat;
  background-size:contain;
}

@media (min-width: 768px) {
  #section-1 .head-menu p {
    padding-left: 2.5rem;
  }
  #section-1 .head-menu p::before {
    width: 3.2rem;
    height: 3.2rem;
  }
}
@media (min-width: 992px) {
  #section-1 .head-menu p {
    padding-left: 3.5rem;
  }
  
  #section-1 .head-menu p::before {
    width: 5.2rem;
    height: 5.2rem;
  }
}


/* ===============================
   メインイメージ
================================ */
  /* 背景画像を配置し、head-left と重なる */
  #section-1::before {
    content: "";
    position: absolute;
    right: 0px;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/nyukyo/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; /* 背景をテキストの背面に配置 */
  }
}


/* ===============================
   レスポンシブレイアウト調整
================================ */
@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: 1400px) { 
  #section-1 .title-main {
    font-size: 3.25rem;
  }
  /* head-menu 内のテキスト */
  #section-1 .head-menu p {
    font-size: 2rem;
  }
}
/* =========================
  上部ボタン
========================= */
#top_inquiry-box a {
  border-radius: 1rem;
  box-shadow: 0px 4px 4px 0px #00000040;
  box-shadow: 0px -12px 2px 0px #00000040 inset;
  font-size: 0.85rem;
  width: 50%;
  max-width: 8.5rem;
}
@media only screen and (min-width: 768px) {
  #top_inquiry-box a {
    max-width: 23rem;
    font-size: 1.5rem;
  }
}

/* =========================
  中部電力の家賃収納代行サービス※とは？
========================= */
#section-concept {
}
#section-concept h2{
  font-size: 1.75rem;
}
#section-concept h3{
  font-size: 1.25rem;
}
#section-concept h4{
  font-size:0.85rem;
  align-content: center;
  min-height: 50px;/*縦横中央揃える様*/
  flex: auto 0;
}
#section-concept .caption{
  color: #333C5C;
}
#section-concept .box{
  border-radius: 8px;
  box-shadow: 0px 8px 35px 0px #0000001A;

}
#section-concept .img-contain + .d-flex{
  flex: 1;
}

#section-concept .txt{
  font-size:0.85rem;
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
  #section-concept h2{
    font-size: 2.75rem;
  }
  #section-concept h3{
    font-size: 2.2rem;
  }
  #section-concept h4 {
    font-size: 1rem;
    min-height: 76px;
}
  #section-concept .txt{
    font-size:1rem;
  }
}
@media (max-width: 420px) {

#section-concept h4{
  min-height:66px;
}

}
#section-concept > p {
  position: relative;
  width: fit-content;
}
/* 指示矢印の表示 */
#section-concept > p::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1rem;
  transform: translateX(100%); /* 本文の右側に表示 */
  width: 4rem;
  height: 6rem;
  background: url('../images/nyukyo/indicator.svg');
  background-repeat: no-repeat;
  background-size: contain;
}
#section-concept div div div {
}
#section-concept img {
  height: 240px;  /* 画像の高さを合わせる */
}
@media only screen and (max-width: 992px) {
  #section-concept img {
    height: 200px;
  }
}

/* =========================
  毎月の家賃お支払い・送金の流れ
========================= */
#section-flow h2{
  font-size: 1.75rem;
}
#section-flow h3{
  font-size: 1.25rem;
}
#section-flow {
  background: url('../images/nyukyo/bg_flowchart_sp.png') no-repeat center 80% #d0f9f7;
  background-size: 88%;
}
#section-flow img{
  width:100%;
}

@media (min-width: 375px) {
  #section-flow {
    background: url('../images/nyukyo/bg_flowchart_sp.png') no-repeat center 75% #d0f9f7;
    background-size: 86%;
  }
}
@media (min-width: 480px) {
  #section-flow {
    background: url('../images/nyukyo/bg_flowchart_sp.png') no-repeat center 58% #d0f9f7;
    background-size: 88%;
  }
  #section-flow img{
    padding-top: 2rem;
    margin-top: -3rem;
  }
}
@media (min-width: 576px) {
  #section-flow {
    background: url('../images/nyukyo/bg_flowchart_sp.png') no-repeat center center #d0f9f7;
    background-size: 76%;
  }
  #section-flow img{
    width:536px;
    margin-top: -3rem;
    margin-left: 0.4rem;
  }
}
@media (min-width: 768px) {
  #section-flow {
    background-size: 88%;
  }
  #section-flow img{
    width:738px;
    margin-top: -1rem;
    margin-left: 1rem;
  }
}
@media (min-width: 992px) {
  #section-flow h2{
    font-size: 2.75rem;
  }
  #section-flow h3{
    font-size: 2.2rem;
  }
  #section-flow {
    background: url('../images/nyukyo/bg_flowchart.png') no-repeat center center #d0f9f7;
    background-size: 94%;
  }
  #section-flow  img{
    width:882px;
    margin-top: -3rem !important;
    margin-left: 0rem !important;
  }
}
@media (min-width: 1200px) {
  #section-flow {
    background-size: 100%;
  }
  #section-flow  img{
    width: 1000px;
    margin-top: -1.2rem !important;
    margin-left: 0.4rem !important;
  }
}
@media (min-width: 1400px) {
  #section-flow {
    background-size: 100%;
  }
  #section-flow  img{
    width:1290px;
    margin-top: 2rem !important;
    margin-left: 0rem !important;
  }
}

/* =========================
  中部電力グループおすすめサービス
========================= */
#section-recommended {
}
#section-recommended h2{
  font-size: 1.75rem;
}
#section-recommended h3{
  font-size: 1.25rem;
}

@media (min-width: 768px) {
}
@media (min-width: 992px) {
  #section-recommended h2{
    font-size: 2.75rem;
  }
  #section-recommended h3{
    font-size: 2.2rem;
  }
}

#section-recommended a {
  background-color: transparent;
  border: 1px solid #54595E;
  text-underline-offset: 3px;
}
#section-recommended a:hover {
  background-color: var(--color-green);
  color: white !important;
}

/* =========================
  お問い合わせ/資料請求
========================= */
#section-inquiry {
  position: relative;
  overflow: hidden;
  background: url('../images/nyukyo/bg_inquiry.png') no-repeat left center #E3F5F4;
  background-size: contain;
}
#section-inquiry h2{
  font-size: 1.75rem;
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
  #section-inquiry h2{
    font-size: 2.75rem;
    text-decoration:underline;
    text-underline-offset: 1rem;
    text-decoration-thickness: 2px !important;
  }
}


/* =========================
   下部のお問い合わせボタン
========================= */
.inquiry-box a {
  border-radius: 0.75rem;
  box-shadow: 0px -8px 2px 0px rgba(0, 0, 0, 0.25) inset;
  font-size: 1.25rem;
  width: 70%;
  max-width: 21.25rem;

}
@media only screen and (min-width: 992px) {
  .inquiry-box a {
    font-size: 1.75rem;
    max-width: 24rem;
  }
}