@charset "UTF-8";
/* =========================================================
  special.scss
  - 既存ベース（reset / color / breakpoints / layout / flex / typography）前提
  - マークアップはそのまま
  - 影響範囲は main#ecoShift / main#sumika / main#ewh の中だけ
========================================================= */
/* =========================================================
  共通：この3ページだけ typography の左右paddingを無効化（innerに寄せる）
========================================================= */
:where(main#ecoShift, main#sumika, main#ewh) :where(h1, h2, h3, h4, h5, h6, p) {
  padding-inline: 0;
}
:where(main#ecoShift, main#sumika, main#ewh) :where(img, picture) {
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* =========================================================
  ecoShift
========================================================= */
main#ecoShift {
  /* page tokens */
  --eco-accent: var(--c-brand);
  --eco-accent2: var(--c-brand-2);
  --eco-ye: #fff3a6;
  --c-ye-bg: #fff8d9;
  --sh-1: 0 10px 24px rgba(0, 0, 0, 0.14);
  /* ---------------------------------------------------------
    TOP：5アイコン（.fwrap ecoShift-list）
  --------------------------------------------------------- */
  /* ---------------------------------------------------------
    セクション共通（innerベースで統一）
  --------------------------------------------------------- */
  /* section-03 だけ上が大きい（画像が浮く構成） */
  /* 黄色背景ブロック（bg-ye） */
  /* お問い合わせ（contact） */
  /* 画像タイトル（h3.img-title） */
  /* 2カラム（.grid） */
  /* TELだけ英字フォントでデカく */
  /* CTAボタン（HTML：<div class="btn_ecoshift">） */
  /* contactセクション内の色味寄せ */
}
main#ecoShift .ecoShift-list {
  width: 90%;
  margin: -15% auto 0;
  align-items: flex-end;
}
main#ecoShift .ecoShift-list.fwrap {
  padding-bottom: 0; /* baseの最後の余白を切る */
  justify-content: center;
  gap: 15px;
}
main#ecoShift .ecoShift-list.fwrap > [class^=con-],
main#ecoShift .ecoShift-list.fwrap > [class*=" con-"] {
  margin-bottom: 0; /* baseの縦余白を切る */
}
main#ecoShift .ecoShift-list li {
  width: 18%;
  margin-bottom: 20px;
}
main#ecoShift .ecoShift-list li:not(:last-child) {
  margin-right: 2.5%;
}
main#ecoShift .ecoShift-list li img {
  display: block;
  width: 100%;
}
@media (min-width: 1024px) {
  main#ecoShift .ecoShift-list {
    width: 80%;
  }
  main#ecoShift .ecoShift-list.fwrap {
    gap: 0;
  }
}
@media (max-width: 1023px) {
  main#ecoShift .ecoShift-list {
    width: 90%;
    margin: -30% auto 0;
    justify-content: center;
  }
  main#ecoShift .ecoShift-list li {
    width: 30%;
    margin-right: 0;
  }
  main#ecoShift .ecoShift-list li:not(:last-child) {
    margin-right: 0;
  }
}
main#ecoShift section {
  margin: 0;
  padding: 0;
  /* h2/p 内のハイライト・強調（既存マークアップ維持） */
  /* table */
}
main#ecoShift section .inner {
  /* layoutの .inner は padding-block を持ってる想定 → ecoShiftは上だけ積む */
  padding-block: 0;
  padding-top: 100px;
}
@media (max-width: 1023px) {
  main#ecoShift section .inner {
    padding-top: 50px;
  }
}
main#ecoShift section .inner h2 {
  text-align: center;
  font-weight: 800;
  margin-bottom: clamp(16px, 2vw, 30px);
}
main#ecoShift section .inner p {
  text-align: center;
  margin: 0 auto clamp(16px, 2vw, 24px);
  line-height: 1.75;
  color: var(--c-text);
}
@media (max-width: 1023px) {
  main#ecoShift section .inner .fwrap .con-2 {
    gap: 0;
    width: 100%;
    max-width: 100%;
  }
}
main#ecoShift section :where(h2, p) span {
  background: linear-gradient(transparent 55%, var(--eco-ye) 55%);
}
main#ecoShift section :where(h2, p) strong {
  color: var(--eco-accent);
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  font-weight: 900;
}
main#ecoShift section :where(h2, p) img {
  display: block;
  width: auto;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  main#ecoShift section :where(h2, p) img {
    width: 100%;
  }
}
main#ecoShift section table {
  width: 100%;
  margin: 50px 0;
  border-collapse: collapse;
}
main#ecoShift section table thead {
  background: color-mix(in srgb, var(--eco-accent) 18%, #fff 82%);
}
main#ecoShift section table thead th {
  width: 33.3333%;
  padding: 20px 0;
  color: var(--eco-accent2);
  font-weight: 800;
  font-size: clamp(1rem, 2vw, 1.4rem);
  text-align: center;
}
main#ecoShift section table tbody td {
  padding: 20px;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  border-bottom: 3px solid color-mix(in srgb, var(--eco-accent) 20%, #fff 80%);
}
main#ecoShift section table tbody td:not(:last-child) {
  text-align: center;
}
main#ecoShift section#section-03 .inner {
  padding-top: 200px;
  padding-bottom: 100px;
}
@media (max-width: 1023px) {
  main#ecoShift section#section-03 .inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
main#ecoShift section.bg-ye {
  background: var(--c-ye-bg);
  position: relative;
  margin-top: 100px;
}
main#ecoShift section.bg-ye .inner {
  padding-top: 200px;
  padding-bottom: 200px;
}
@media (max-width: 1023px) {
  main#ecoShift section.bg-ye .inner {
    padding-top: 8cqb;
    padding-bottom: 8cqb;
  }
}
main#ecoShift section.bg-ye h2 {
  color: var(--eco-accent2);
}
main#ecoShift section.bg-ye h2 span {
  color: var(--c-text);
}
main#ecoShift section.bg-ye h2 sup {
  font-size: 0.6em;
  vertical-align: super;
}
main#ecoShift section.bg-ye .itemposition {
  position: absolute;
  width: min(70%, 960px);
  top: -150px;
  left: 0;
  right: 0;
  margin: auto;
}
@media (max-width: 1023px) {
  main#ecoShift section.bg-ye .itemposition {
    width: 100%;
    top: -70px;
  }
}
main#ecoShift section.contact .inner {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (max-width: 1023px) {
  main#ecoShift section.contact .inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
main#ecoShift section.contact .inner h2 {
  text-align: center;
}
main#ecoShift section.contact .inner p {
  margin-bottom: 24px;
}
main#ecoShift section.contact .inner .fwrap .con-2 {
  margin-bottom: 0;
}
main#ecoShift section:last-child .inner {
  padding-bottom: 100px;
}
@media (max-width: 1023px) {
  main#ecoShift section:last-child .inner {
    padding-bottom: 50px;
  }
}
main#ecoShift h3.img-title {
  margin: 50px 0 30px;
  position: relative;
}
main#ecoShift h3.img-title span {
  position: absolute;
  color: transparent;
  font-size: 0.00001px;
}
main#ecoShift .grid {
  display: grid;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  grid-template-columns: 50% minmax(320px, 512px) 1fr;
}
main#ecoShift .grid .left {
  /* 画像は上の共通で面倒見てる */
}
main#ecoShift .grid .right p {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  text-align: left;
}
main#ecoShift .grid .right img {
  margin-top: 16px;
}
@media (max-width: 1023px) {
  main#ecoShift .grid {
    display: block;
    padding-inline: var(--inner-pad-x);
  }
  main#ecoShift .grid .right p {
    text-align: center;
  }
}
main#ecoShift .btn_ecoshift.tel a {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  letter-spacing: 0.02em;
}
main#ecoShift .btn_ecoshift {
  width: 100%;
  height: 70px;
  margin: 30px auto 0;
}
@media (min-width: 1024px) {
  main#ecoShift .btn_ecoshift {
    margin: 30px auto 50px;
  }
}
main#ecoShift .btn_ecoshift a {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 800;
  color: var(--c-text);
  border-radius: 12px;
  border: 1px solid var(--c-border-strong);
  box-shadow: var(--sh-1);
  text-decoration: none;
  background: var(--c-bg);
}
main#ecoShift .btn_ecoshift a:focus-visible {
  outline: 2px solid var(--c-brand-2);
  outline-offset: 3px;
}
@media (hover: hover) {
  main#ecoShift .btn_ecoshift a:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  }
  main#ecoShift .btn_ecoshift a:active {
    transform: translateY(0);
  }
}
main#ecoShift .contact .btn_ecoshift a {
  border-color: var(--c-brand-2);
  color: var(--c-brand-2);
}

/* =========================================================
  sumika
========================================================= */
main#sumika {
  /* first：SP縦 / PC横50/50 */
  /* sumika-02（con-2をフル幅に固定したいなら 1023 以下で） */
  /* FAQ */
  /* sumikaBox：SP縦 / PC 20 + 60 */
  /* ボタン：sumika（このページ内だけ） */
}
main#sumika section {
  text-align: center;
}
main#sumika section .inner {
  /* layoutの .inner が強い場合の上書き（sumikaは軽めに） */
  padding-block: 50px;
  padding-inline: 20px;
}
@media (min-width: 1024px) {
  main#sumika section .inner {
    padding-block: var(--inner-pad-y);
    padding-inline: var(--inner-pad-x);
  }
}
main#sumika section.bg-gr {
  background: var(--c-ring-l);
}
main#sumika section h2 {
  font-size: 150%;
  font-weight: 900;
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  main#sumika section h2 {
    font-size: 220%;
  }
}
main#sumika section h3 {
  margin-bottom: 20px;
}
main#sumika section video {
  width: 100%;
  margin: 30px auto;
}
main#sumika section#first {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
main#sumika section#first .con-2 {
  position: relative;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 1024px) {
  main#sumika section#first .con-2 {
    width: 50%;
    max-width: 50%;
  }
}
main#sumika section#first .con-2:first-child img {
  display: block;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
}
main#sumika section#first .con-2:last-child {
  position: relative;
  background: url(../image/sumika/sumika-03.png) no-repeat bottom right 20%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  padding-bottom: 100px;
}
@media (min-width: 1024px) {
  main#sumika section#first .con-2:last-child {
    margin-top: 0;
    padding-bottom: 0;
  }
}
main#sumika section#first .con-2:last-child h2 {
  margin: 0;
}
main#sumika section#first .con-2:last-child img {
  display: block;
  width: 60%;
  height: auto;
  margin: 20px auto 0;
}
main#sumika section#first .con-2:last-child .text {
  position: absolute;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
}
@media (max-width: 1023px) {
  main#sumika section#sumika-02 .inner .fwrap .con-2 {
    width: 100%;
    max-width: 100%;
  }
}
main#sumika section#sumika-03 .inner .fwrap .con-3 img {
  width: 80%;
  margin: auto;
}
main#sumika section.contact-ye {
  background: var(--c-ye-bg);
}
main#sumika section#fqa .inner dl.sumika_faq {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
main#sumika section#fqa .inner dl.sumika_faq dt,
main#sumika section#fqa .inner dl.sumika_faq dd {
  width: 100%;
  position: relative;
  text-align: left !important;
  padding-left: 80px;
}
main#sumika section#fqa .inner dl.sumika_faq dt {
  margin: 0 0 10px;
  font-size: 150%;
  color: var(--c-brand-2);
  font-weight: 900;
}
@media (min-width: 1024px) {
  main#sumika section#fqa .inner dl.sumika_faq dt {
    font-size: 180%;
  }
}
main#sumika section#fqa .inner dl.sumika_faq dt::after {
  content: "Q.";
  font-weight: normal;
  position: absolute;
  left: 0;
  top: -30px;
  font-size: 200%;
}
main#sumika section#fqa .inner dl.sumika_faq dd {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: var(--c-brand-2) solid 2px;
}
main#sumika section#fqa .inner dl.sumika_faq dd::after {
  content: "A.";
  position: absolute;
  left: 0;
  top: -20px;
  font-size: 350%;
}
main#sumika .fwrap.sumikaBox {
  justify-content: center;
}
main#sumika .fwrap.sumikaBox .con-20,
main#sumika .fwrap.sumikaBox .con-60 {
  width: 100%;
  max-width: 100%;
}
@media (min-width: 1024px) {
  main#sumika .fwrap.sumikaBox .con-20 {
    width: 20%;
    max-width: 20%;
  }
  main#sumika .fwrap.sumikaBox .con-60 {
    width: 60%;
    max-width: 60%;
    padding-left: 40px !important;
  }
}
main#sumika .fwrap.sumikaBox .con-60 {
  padding-left: 0;
}
main#sumika .fwrap.sumikaBox .con-60 h4 {
  margin: 20px 0 10px;
  text-align: center;
}
@media (min-width: 1024px) {
  main#sumika .fwrap.sumikaBox .con-60 h4 {
    margin: 0 0 10px;
    text-align: left;
  }
}
main#sumika .btn_sumika {
  width: 80%;
  margin: 0 auto;
}
main#sumika .btn_sumika a {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 120%;
  font-weight: 900;
  border: 1px solid var(--c-brand-2);
  border-radius: 10px;
  color: var(--c-brand-2);
  background: var(--c-bg) url(../image/sumika/arrow-dpk.svg) no-repeat center right 20px;
  background-size: 40px;
  box-shadow: var(--c-ring-l) 5px 5px 7px;
  text-decoration: none;
}
@media (min-width: 1024px) {
  main#sumika .btn_sumika a {
    font-size: 180%;
  }
}

/* =========================================================
  ewh
========================================================= */
main#ewh {
  text-align: center;
  /* top（画像の上にリンクを重ねる） */
  /* inner：SPだけ軽く指定（PCはlayoutのinnerに任せる） */
  /* line */
  /* point（.fwrap ewhPoint） */
  /* ボタン：ewh（このページ内だけ） */
}
main#ewh img {
  display: block;
  margin: 0;
}
main#ewh a {
  opacity: 1;
}
main#ewh a:hover {
  opacity: 1 !important;
}
main#ewh h2 {
  font-size: 200%;
  font-weight: 900;
  margin-bottom: 20px;
}
@media (max-width: 1023px) {
  main#ewh h2 {
    font-size: 160%;
  }
}
main#ewh .ewh_top {
  position: relative;
}
main#ewh .ewh_top a {
  display: block;
  width: 30%;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
  top: 20%;
  left: 0;
  right: auto;
  margin: auto;
}
@media (max-width: 1023px) {
  main#ewh .ewh_top a {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
  }
}
@media (max-width: 1023px) {
  main#ewh .inner {
    padding: 30px 20px;
  }
}
main#ewh hr {
  border: none;
  height: 30px;
  margin: 0;
  background: url(../image/ewh/ecowisehouse-line.svg) no-repeat center center;
  background-size: auto 100%;
}
@media (max-width: 1023px) {
  main#ewh hr {
    background-size: 40%;
  }
}
main#ewh .fwrap.ewhPoint {
  width: 80%;
  margin: 0 auto 30px;
  justify-content: space-between;
}
@media (max-width: 1023px) {
  main#ewh .fwrap.ewhPoint {
    width: 90%;
  }
}
main#ewh .fwrap.ewhPoint .con-2 {
  width: 43%;
  margin-bottom: 20px;
}
@media (max-width: 1023px) {
  main#ewh .fwrap.ewhPoint .con-2 {
    width: 100%;
  }
  main#ewh .fwrap.ewhPoint .con-2 img {
    width: 80%;
    margin: 0 auto;
    position: relative;
    z-index: -1;
  }
}
main#ewh .fwrap.ewhPoint .con-2 .btn_ewh {
  margin-top: -20px;
  margin-bottom: 30px;
  position: relative;
  z-index: 10;
}
main#ewh section .inner p {
  text-align: left;
}
main#ewh section#ehw-01 .inner .fwrap .con-2,
main#ewh section#ewh-02 .inner .fwrap .con-2 {
  width: 100%;
  max-width: 100%;
}
@media (min-width: 1024px) {
  main#ewh section#ehw-01 .inner .fwrap .con-2,
  main#ewh section#ewh-02 .inner .fwrap .con-2 {
    width: 48%;
    max-width: 48%;
  }
}
main#ewh .btn_ewh {
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  main#ewh .btn_ewh {
    width: 95%;
  }
}
main#ewh .btn_ewh a {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 75%;
  letter-spacing: -0.05rem;
  font-weight: 900;
  border: 1px solid var(--c-brand-2);
  border-radius: 10px;
  color: var(--c-brand-2);
  background: color-mix(in srgb, var(--c-brand) 22%, #fff 78%) url(../image/ewh/ecowisehouse-arrow.svg) no-repeat center right 20px;
  background-size: 20px;
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}
main#ewh .btn_ewhcontact {
  width: 80%;
  height: 60px;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  main#ewh .btn_ewhcontact {
    width: 95%;
  }
}
main#ewh .btn_ewhcontact a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--c-brand);
  color: #fff;
  background: var(--c-brand) url(../image/ewh/ecowisehouse-arrow2.svg) no-repeat center right 20px;
  background-size: 20px;
  text-decoration: none;
}
@media (max-width: 1023px) {
  main#ewh .btn_ewhcontact a {
    font-size: 3vw;
  }
}