@charset "UTF-8";

/* CSS格納先 */
/* /wp-content/uploads/custom-assets/repowering/css/recruit-style.css */

/* 画像格納先 */
/* /wp-content/uploads/custom-assets/repowering/img/画像名.png */
/* パス */
/* url(../img/画像名.png); */


/* デザインカンプ貼り付け用 */
/* main {
    background-image: url(../img/main.png);
    background-repeat: no-repeat;
    background-position: top;
    background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: lighten; 
} */




/* ==============================================
   リセット・ベーススタイル
   ============================================== */

/* ルートフォントサイズを10pxに設定 (16px * 62.5% = 10px) */
/* 全てを border-box にする */
html {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    box-sizing: border-box;
}

/* 全ての要素に親の値を強制的に継承させる */
*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    /* フォントサイズと行の高さをremで指定 */
    font-size: 1.6rem; /* 16px */
    line-height: 1.6 !important;
    color: #4b4b4b !important;

    /* WPフォント設定 */
    font-family: "Segoe UI", Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

    /* 両端揃え */
    text-align: justify;

    /* 句読点の処理を適切に行う */
    line-break: strict; 
    
    /* ぶら下げ処理で、視覚的に行末を揃える */
    hanging-punctuation: allow-end;

    /* テキストサイズを固定し、ズームによる変更を防ぐ */
   -webkit-text-size-adjust: 100%;
}

p {
    margin: 0;
    padding: 0;
}

/* リンクの基本スタイルリセット */
a {
    color: inherit;
    text-decoration: none;
}

/* ホバーで半透明 */
a:hover {
    opacity: 0.7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-weight: 600;
}



/* ----------------------------------------------------
   LP共通レイアウト
   コンテンツ幅: 1100px
---------------------------------------------------- */
.inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2.0rem;
    text-align: center;
}



/* ----------------------------------------------------
   header ヘッダー
---------------------------------------------------- */

.header {
    width: 100%;
    background-color: #ffffff; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.0rem 5.0rem;
}

.header__logo a {
    display: flex;
    align-items: center;
    gap: 1.0rem;
    text-align: left;
}

.header__logo img {
    width: 6.6rem;
    height: 6.6rem;
    display: block;
}

.header__logo-text-group {
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem; 
}

.header__logo-sub-title {
    font-size: 1.6rem;
    color: #65bfa4;
    font-weight: 700;
    line-height: 1.2;
}

.header__logo-title {
    font-size: 2.6rem;
    color: #65bfa4;
    font-weight: 700;
    line-height: 1.2;
}

.header__contact {
    display: flex;
    align-items: center;
    gap: 3.0rem;
}

.header__phone-group {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.header__phone-icon img {
    width: 3.0rem; 
    height: 4.0rem;
    display: block;
}

.header__phone-text-group {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.header__phone-number {
    font-size: 2.6rem; 
    color: #4b4b4b;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: color 0.2s;
}

.header__phone-number:hover {
    color: #65bfa4;
}

.header__phone-hours {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 2px;
}

.header__mail-icon img {
    width: 5.8rem;
    height: 4.5rem;
    display: block;
}



/* ----------------------------------------------------
   mv メインビジュアル
---------------------------------------------------- */

/* 検索エンジンとスクリーンリーダーにのみ認識させるためのCSS */
.mv-heading-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0); 
    border: 0;
}

.mv .inner {
    margin: 0 auto;
    padding: 0;
}

.mv img {
    width: 100%;
}



/* ----------------------------------------------------
   problem-section 悩みパート
---------------------------------------------------- */

.problem-section {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 11.0rem;
}

.problem-section {
    overflow-x: hidden; 
}

.problem-section .inner {
    padding: 0;
}

.problem-section .problem__title-wrap {
    background-color: #fcec53;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 55px;
    z-index: 2;
}

.problem-section .problem__title-wrap::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 11.6rem solid #fcec53;
    border-right: 55rem solid transparent;
    border-left: 55rem solid transparent;
    z-index: 1;
}

.problem-section h2 {
    padding: 2.8rem 0 0;
    font-size: 3.8rem;
    line-height: 1;
    color: #1dab39;
    position: relative;
    z-index: 4;
    /* top: -2rem; */
    top: -0.5rem;
}

.problem-section h2 span {
    font-size: 3.2rem;
    color: #4b4b4b;
}

.problem-section .problem__sub-title {
    font-size: 2.7rem;
    font-weight: bold;
    position: relative;
    top: 1rem;
    z-index: 3;
}

.problem__list-wrap,
.problem__image-group,
#btn-fv-form {
    padding: 0 2.0rem;
}

.problem__list-wrap {
    margin-top: 10.0rem;
}

.problem__item {
    font-size: 3.5rem;
    font-weight: bold;
    position: relative;
    padding: 1.5rem 3.5rem;
    border: 1px solid #333;
    border-radius: 90px; 
    margin: 0 1.0rem 2.5rem;
    display: inline-block;
    color: #1e1e1e !important;
}

.problem__item span {
    background-image: linear-gradient(#fcec53, #fcec53); 
    background-size: 100% 1.5rem;     
    background-repeat: no-repeat;   
    /* bottom の位置 (100%) から px 上にずらして配置する */
    background-position: 0 calc(100% - 0px);   
    text-decoration: none;
}

.problem__item::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 1.4rem;
    height: 2.3rem;
    background-image: url(../img/problem__item_triangle.png);
    background-repeat: no-repeat;
    background-size: contain;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: -2.0rem;
    z-index: 2;
}

.problem__image-group {
    margin: 0 auto;
    margin-top: -8.7rem;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    width: 80%;
    padding-left: 3%;
}

.problem__image-group img {
    width: 17.5rem;
    height: 14.2rem;
}

/* ボタン */
/* コンテナ（補足コピーとボタンをまとめる） */
.button__cta {
    margin: 0 auto;
    margin-top: -3.5rem;
    margin-bottom: 4.1rem;
    text-align: center;
}

.message__button {
    position: relative; 
    height: 18.0rem; 
    text-decoration: none;
    display: block;
    margin: 0 auto;

}

/* 補足コピー */
.message__button .button__cta-message {
    display: inline-block;
    padding: 1.5rem 0.5rem;
    background-color: white;
    color: #4b4b4b;
    border: 5px solid #f2800f;
    border-radius: 50px;
    font-size: 2.4rem;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    max-width: 485px;
    width: 100%;
}

/* ボタン */
.message__button .button__cta-text {
    display: inline-block; 
    padding: 5.0rem 1.0rem 2.0rem;
    background-color: #f2800f;
    color: white;
    font-size: 5rem;
    font-weight: bold;
    border: none;
    border-radius: 80px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
    position: absolute;
    top: 2.7rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    box-shadow:0px 8px 0px rgba(101, 53, 6, 1);
    max-width: 900px;
    width: 100%;
}

.message__button .button__cta-text span {
    font-size: 4.3rem;
}


/* ホバー時の下の画像が透けないよう調整 */
 a.message__button:hover {
    z-index: 3;
    opacity: 1;
}

/* オパシティではなく、バックグランドの色変更（#f2800fの0.7に近い色）で対応 */
.message__button .button__cta-text:hover {
    background-color: #f6a657;
    
}

.repowering__heading-group {
    position: relative;
}

.repowering__decoration-line {
    width: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.repowering__decoration-icon {
    width: 9.2rem;
    height: 9.2rem;
    position: absolute;
    top: -2.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.repowering__sub-heading {
    font-size: 4rem;
    font-weight: bold;
    padding-top: 10.0rem;
}



/* ----------------------------------------------------
   repowering-section リパワリング工事とは？
---------------------------------------------------- */

.repowering-section h2 {
    font-size: 4.6rem;
    margin-top: -1.0rem;
    background-image: linear-gradient(#fcec53, #fcec53); 
    background-size: 100% 2.5rem;     
    background-repeat: no-repeat;   
    /* bottom の位置 (100%) から px 上にずらして配置する */
    background-position: 0 calc(100% - 3px);   
    text-decoration: none;
    display: inline-block;
    padding: 0 3.0rem;
    margin-bottom: 6.5rem;
}

.repowering__definition {
    font-size: 3rem;
    font-weight: bold;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 5.0rem;
}

.repowering__definition span {
    color: #e6606e;
}

.repowering__image-wrap.repowering-block__image-wrap {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 6.0rem;
}

.repowering__image-wrap.repowering-block__image-wrap img {
    width: 100%;
}

.repowering__merits-title {
    font-size: 4rem;
    color: #fff;
    background-color: #1dab39;
    max-width: 1000px;
    width: 100%;
    padding: 1.0rem;
    margin: 0 auto;
}

.repowering__merits-title span {
    color: #fcec53;
}

.repowering__merits-title br {
    display: none;
}

.repowering-merit-item {
    display: flex;
    align-items: flex-start;
    gap: 4.0rem;
    list-style: none;
    margin-bottom: 3.0rem;
}

.repowering-merit-item__header {
    flex-shrink: 0;
    width: 19.0rem;
    height: 19.0rem;
    border-radius: 50%;
    border: 5px solid #1dab39;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    font-size: 4rem;
    font-weight: bold;
    color: #1dab39;
}

span.repowering-merit-item__number {
    margin-top: -1.5rem;
}

.repowering-merit-item__icon01 {
    width: 6.6rem;
    height: 6.9rem;
}

.repowering-merit-item__icon02 {
    width: 4.7rem;
    height: 7.3rem;
}

.repowering-merit-item__icon03 {
    width: 7.8rem;
    height: 6.8rem;
}

.repowering__merit-list {
    margin: 6.0rem 4.5rem 6.0rem;
}

.repowering-merit-item__body {
    text-align: left;
}

.repowering-merit-item__title {
    font-size: 3.6rem;
    background-image: linear-gradient(#fcec53, #fcec53); 
    background-size: 100% 1.5rem;     
    background-repeat: no-repeat;   
    /* bottom の位置 (100%) から px 上にずらして配置する */
    background-position: 0 calc(100% - 1.2rem);   
    text-decoration: none;
    display: inline-block;
    padding: 0 1.0rem;
    color: #1dab39;
}

.repowering-merit-item__text {
    font-size: 2.4rem;
    font-weight: bold;
}

.repowering-merit-item__text span {
    font-weight: bold;
    color: #e6606e;
}

section.repowering-section {
    margin-bottom: 14.0rem;
}



/* ----------------------------------------------------
   choice-section どちらのオーナーになりたい？
---------------------------------------------------- */

.choice-section .inner {
    background: #f8f6f6;
    margin-top: 10.5rem;
    padding-bottom: 7.0rem;
}

.choice-section .inner {
    width: 100%;
    position: relative;
    text-align: center;
}

.choice-section .inner::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 5.0rem solid #f8f6f6;
    border-right: 7.0rem solid transparent;
    border-left: 7.0rem solid transparent;
}

.choice__sub-heading {
    font-size: 4rem;
    font-weight: bold;
    padding-top: 4.0rem;
}

img.choice__decoration-icon {
    width: 9.2rem;
    height: 9.2rem;
    margin-top: -4.5rem;
}

.choice__title {
    font-size: 4.6rem;
    font-weight: bold;
    margin-bottom: 5.5rem;
    line-height: 1.5;
}

.choice__title span {
    font-size: 4rem;
    font-weight: bold;
    padding: 0 3.0rem;
}

.choice__image-wrap {
    margin-bottom: 5.5rem;
    text-align: center
}

.choice__image-wrap img {
    max-width: 1000px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.choice__message {
    font-size: 4.6rem;
    font-weight: bold;
    line-height: 1.5;
}



/* ----------------------------------------------------
   value-section 新しいパワコンが生み出す価値
---------------------------------------------------- */

.value-section .inner {
    padding-top: 8.5rem;
    background: #dbf1df;
    margin-bottom: 15.0rem;
    padding-bottom: 6.0rem;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 1100px 130px;
    border-bottom-left-radius: 1100px 130px;
}

.value__title {
    font-size: 4.6rem;
    font-weight: bold;
    margin-bottom: 8.0rem;
}

.value-section h2 span {
    font-size: 4.6rem;
    font-weight: bold;
    background-image: linear-gradient(#fcec53, #fcec53); 
    background-size: 100% 2.5rem;     
    background-repeat: no-repeat;   
    /* bottom の位置 (100%) から px 上にずらして配置する */
    background-position: 0 calc(100% - 3px);   
    text-decoration: none;
    padding: 0 1.0rem 0 0;

}

/* 共通 */
br.br-sp {
    display: none;
}

.value__case-study {
    position: relative;
}

.value__case-study-body {
    background: #fff;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.6rem;
    box-shadow: 6px 6px 2px rgba(15, 89, 30, 0.24);
    margin-bottom: 4.5rem;
}

.value-section h3 {
    font-size: 3rem;
    color: #fff;
    background-color: #1dab39;
    border-radius: 50px;
    padding: 1.0rem 3.5rem;
    margin: 0 auto;
    position: absolute;
    top: -3.5rem;
    left: 50%;
    transform: translateX(-50%);
    /* 改行せずに一行で表示 */
    white-space: nowrap;
}

img.value__image {
    width: 100%;
}

.value__image-wrap {
    max-width: 897px;
    margin: 0 auto;
    width: 100%;
    padding-top: 5.5rem;
    margin-bottom: 5.5rem;
}

.value__case-caption {
    display: inline-block;
    padding: 0 1.0rem;
    background-color: white;
    color: #1dab39;
    border: 1px solid #1dab39;
    border-radius: 50px;
    font-size: 3rem;
    font-weight: bold;
    max-width: 673px;
    width: 67.3%;
}

.value__case-caption span {
    font-size: 4.6rem;
}

.value__merit-list {
    margin: 2.0rem 0 4.5rem 13.0rem;
    text-align: left;
    font-size: 3rem;
    font-weight: bold;
    line-height: 2.1;
    list-style-type: none;
    position: relative;
    padding-left: 0;
}

.value__merit-list span {
    background-image: linear-gradient(#fcec53, #fcec53);
    background-size: 100% 1.2rem;
    background-repeat: no-repeat;
    background-position: 0 calc(100% - .7rem);
    text-decoration: none;
    padding: 0;
}

.value__merit-item {
    position: relative; 
    padding-left: 4.5rem;
}

.value__merit-item::before {
    content: "";
    background-image: url(../img/value_case-icon-check.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 2.9rem;
    height: 2.9rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.value__graph-wrap {
    max-width: 830px;
    margin: 0 auto;
    padding-bottom: 7.0rem;
    line-height: .5;
}

.value__graph-wrap p {
    font-size: 2.0rem;
    margin-bottom: 2.0rem;
}

img.value__graph-image {
    width: 100%;
    margin-bottom: 4.0rem;
}

.value__final-message {
    font-size: 4.6rem;
    font-weight: bold;
    margin-bottom: 8.5rem;
}

.value__final-message span {
    font-size: 4.6rem;
    font-weight: bold;
    background-image: linear-gradient(#fcec53, #fcec53); 
    background-size: 100% 2.5rem;     
    background-repeat: no-repeat;   
    /* bottom の位置 (100%) から px 上にずらして配置する */
    background-position: 0 calc(100% - .3rem);   
    text-decoration: none;
    display: inline-block;
    padding: 0;

}

.value__final-message p {
    margin-bottom: -1.2rem;
}

.value__note {
    font-size: 2.4rem;
}



/* ----------------------------------------------------
   point-section 6つの強み
---------------------------------------------------- */

.point-section .inner {
    margin-top: 10.5rem;
    padding-bottom: 8.0rem;
}

/* 三角 */
.point-section .inner {
    width: 100%;
    position: relative;
    text-align: center;
}

.point-section .inner::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 5.0rem solid #fff;
    border-right: 7.0rem solid transparent;
    border-left: 7.0rem solid transparent;
}

.point__sub-heading {
    font-size: 4rem;
    font-weight: bold;
    padding-top: 4.0rem;
    margin-bottom: 2.0rem;
}

img.point__decoration-icon {
    margin-top: -4.5rem;
}

.point__title {
    font-size: 4.6rem;
    font-weight: bold;
    margin-bottom: 7.0rem;
    line-height: 1.2;
}

.point__title span {
    font-size: 6rem;
}

.point__list {
    max-width: 1000px;
    margin: 0 auto;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 3.0rem;
    margin-bottom: 4.5rem;
}

.point-item {
    background-color: #ffffff;
    border: 2px solid #1dab39;
    box-shadow: 6px 6px 2px rgba(15, 89, 30, 0.24);
    border-radius: 5px;
    padding: 2.0rem 2.0rem 2.5rem;
    position: relative;
    margin-bottom: 7.0rem;
    /* 2列にするため、(100% - 隙間) / 2 */
    width: calc((100% - 3.0rem) / 2); 
}

.point-item__header {
    text-align: center;
    position: relative;
    padding-top: 4.5rem;
}

.point-item__title {
    line-height: 1.5;
    color: #1dab39;
    font-size: 3.8rem;
    padding: 0 1.0rem;
    display: inline;
    box-shadow: 0 1.2rem 0 -.4rem #fcec53; 
}

.point-item__text {
    font-size: 2.0rem;
    line-height: 1.5;
    text-align: justify;
    max-width: 84%;
    margin: 0 auto 0.5rem;
}

.point-item__number {
    position: absolute;
    top: -6.0rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 9.0rem;
    height: 9.0rem;
    border-radius: 50%;
    background-color: #1dab39;
    color: #ffffff;
    font-weight: bold;
    font-size: 4.6rem;
    z-index: 10;
}

.point-item__image-wrap {
    text-align: center;
    margin-top: 3.0rem;
    margin-bottom: 3.5rem;
}

.point-item__image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin: 0 auto;
}



/* ----------------------------------------------------
   case-section 施工事例と費用イメージ
---------------------------------------------------- */

.case-section .inner {
    padding-top: 11.0rem;
    padding-bottom: 8.0rem;
    background: #dbf1df;
}

.case__title {
    font-size: 4.6rem;
    font-weight: bold;
    margin-bottom: 9.5rem;
}

.case-single {
    position: relative;
    background: #fff;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.6rem;
    padding-top: 8.5rem;
    padding-bottom: 10.0rem;
}

.case-single__sub-title {
    font-size: 3rem;
    color: #fff;
    background-color: #1dab39;
    border-radius: 50px;
    padding: 1.0rem 3.5rem;
    margin: 0 auto;
    position: absolute;
    top: -3.0rem;
    left: 50%;
    transform: translateX(-50%);
    /* 改行せずに一行で表示 */
    white-space: nowrap;
}

.case-single__image-wrap {
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: 8.0rem;
}

.case-single__image-wrap img {
    width: 100%;
}

.case-single__ba-wrap {
    max-width: 920px;
    margin: 0 auto;
    margin-bottom: 8.0rem;
}

.case-single__ba-wrap img {
    width: 100%;
}

.case-section h4 {
    font-size: 3.8rem;
    color: #fff;
    background-color: #1dab39;
    max-width: 920px;
    width: 100%;
    padding: 1.0rem;
    margin: 0 auto;
}

.case-section h4 span {
    color: #fcec53;
}

.case-single__merit-item {
    display: flex;
    gap: 30px;
    margin-bottom: 4.0rem;
}

.case-single__merit-text-wrap {
    text-align: left;
}

.case-single__merit-heading {
    font-size: 3.5rem;
    background-image: linear-gradient(#fcec53, #fcec53); 
    background-size: 100% 1.5rem;     
    background-repeat: no-repeat;   
    /* bottom の位置 (100%) から px 上にずらして配置する */
    background-position: 0 calc(100% - .7rem);   
    text-decoration: none;
    display: inline-block;
    padding: 0 1.0rem;
}

.case-single__merit-text {
    font-size: 2.4rem;
    line-height: 1.7;
}

.case-single__merit-text span {
    font-weight: bold;
}

.case-single__merit-list {
    margin: 4.5rem 8.0rem 3.0rem 3.4rem;
}

section.case-section {
    margin-bottom: 14.0rem;
}

.case-single__merits-detail {
    margin-bottom: 6.0rem;
}

.case-single__cost-summary {
    font-size: 3.8rem;
    font-weight: bold;
    padding-top: 4.0rem;
    margin-bottom: 2.3rem;
}

/* 金額部分断念→画像に */
/* .case-single__total-cost {
    display: flex;
    justify-content: center;
    align-items: baseline;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 55px;
    color: #1dab39;
    font-size: 5rem;
    font-weight: bold;
    gap: 10px
}

span.case-single__cost-highlight {
    font-size: 9rem;
} */

.case-single__total-cost {
    width: 90%;
    margin: 0 auto;
    margin-top: 6.0rem;
    margin-bottom: 7.7rem;
}

.case-single__cost-icon {
    max-width: 10.7rem;
    width: 100%;
}

.case-single__cost-text {
    padding-bottom: 1.0rem;
    margin-left: 1.0rem;
    max-width: 39.6rem;
    width: 100%;
}

.case-single__cost-graph-wrap {
    position: relative;
    background: #ededed;
    max-width: 897px;
    width: 100%; 
    margin: 0 auto;
    padding: 8.5rem 4.0rem 9.0rem 3.6rem;
    border-radius: 5px;
    box-shadow: 2px 2px 6px rgba(168, 167, 167, 0.27);
}

.case-single__cost-detail {
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
    background-color: #a1a1a1;
    border-radius: 50px;
    padding: 1.0rem 5.5rem;
    margin: 0 auto;
    position: absolute;
    top: -3.0rem;
    left: 50%;
    transform: translateX(-50%);
}

.case-single__cost-graph-wrap div{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 818px;
    width: 100%; 
    margin: 0 auto;
}

.case-single__cost-graph1 {
    max-width: 340px;
    width: 41.5%; 
}

.case-single__cost-graph2 {
    max-width: 430px;
    width: 52.5%;
}



/* ----------------------------------------------------
   faq-section よくある質問
---------------------------------------------------- */

.faq-section .inner {
    padding-top: 4.6rem;
    padding-bottom: 13.0rem;
}

.faq__title {
    font-size: 4.6rem;
    font-weight: bold;
    margin-bottom: 7.0rem;
}

.faq-list {
    list-style: none;
    padding: 0;
    max-width: 1000px; 
    margin: 0 auto;
}

.faq-item {
    background-color: #ededed;
    padding: 3.0rem 6.0rem 1.0rem 3.8rem;
    margin-bottom: 2.6rem;
}

.faq-item div {
    display: flex;
    align-items: center;
    margin-bottom: 2.0rem;
}

.faq-item__q {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 3.6rem;
    margin: 0;
    text-align: left;
}

.faq-item__q-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 7.0rem;
    height: 7.0rem;
    margin-right: 3.0rem;
    background-color: #1dab39;
    border-radius: 50%;
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    font-size: 3.6rem;
    flex-shrink: 0;
}

.faq-item__a {
    margin-top: -1px; 
    font-size: 3.0rem;
    font-weight: bold;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

.faq-item__a-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 7.0rem;
    height: 7.0rem;
    margin-right: 3.0rem;
    border: 1px solid #1dab39;
    border-radius: 50%;
    color: #1dab39;
    font-family: 'Arial', sans-serif;
    font-size: 3.6rem;
    flex-shrink: 0;
}

.faq-item__a span{
    font-weight: bold;
}




/* ----------------------------------------------------
   contact-section 無料相談受付中
---------------------------------------------------- */

.contact-section .inner {
    background-color: #dbf1df;
    padding-top: 5.0rem;
    padding-bottom: 10.0rem;
    text-align: center;
}

.contact-section h2 {
    font-size: 4.6rem;
    background-image: linear-gradient(#fcec53, #fcec53); 
    background-size: 100% 1.5rem;     
    background-repeat: no-repeat;   
    /* bottom の位置 (100%) から px 上にずらして配置する */
    background-position: 0 calc(100% - .8rem);   
    text-decoration: none;
    padding: 0 1.0rem;
    display: inline-block;
}

.contact__sub-heading {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1.0rem;
    margin: 0 auto;
}

.contact__button {
    position: relative;
    text-decoration: none;
    display: block;
    width: 100%;
}

.contact__button .button__cta-text {
    display: inline-block;
    padding: 2.5rem 4.0rem 2.5rem 6.5rem;
    background-color: #f2800f;
    color: white;
    font-size: 3.6rem;
    font-weight: bold;
    border: none;
    border-radius: 8.0rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
    order: 0;
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    z-index: 1;
    box-shadow: 0 .8rem 0 rgba(101, 53, 6, 1);
}

.contact__button .button__cta-text span {
    font-size: 3.0rem;
}

/* コンタクト */
.contact-section .contact__cta-body {
    background: #fff;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 3.0rem;
    padding: 6.0rem 1.6rem 6.0rem;
}

/* --- コンタクトラップ --- */
.contact-section .contact__cta-wrap {
    display: inline-flex;
    gap: 0;
    width: 92%;
    margin-top: 7.0rem;
}

/* --- 電話番号グループ --- */
.contact-section .contact__phone-group {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    width: 58%;
}

.contact-section .contact__phone-icon img {
    width: 3.0rem; 
    height: 4.0rem; 
    display: block;
}

.contact-section .contact__phone-text-group {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.contact-section .contact__phone-number {
    font-size: 5.6rem; 
    /* color: #030303; */
    color: #4b4b4b !important;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: color 0.2s;
}

.contact-section .contact__phone-number:hover {
    color: #65bfa4;
}

.contact-section .contact__phone-hours {
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 2px;
}

/* --- lineグループ --- */
.contact-section .contact__line-group {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    width: 42%;
    padding-left: 4.0rem;
    border-left: 1px solid #4b4b4b;
}

.contact-section .contact__line-note {
    font-size: 1.8rem;
    line-height: 1.2;
    text-align: left;
    width: 63%;
}



/* ----------------------------------------------------
   footer フッター
---------------------------------------------------- */

.site-footer {
    padding: 20px;
    text-align: center;
    background-color: #4b4b4b;
    color: #fff;
}

/* ページトップに戻るボタン */
.page-top-link {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999; 
    display: block; 
    width: 40px;
    height: 40px;
    line-height: 12px;
    background-color: rgba(242, 128, 15, 0.8); 
    background-color: rgba(102 , 192, 163, 0.8); 
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
    font-size: 1.5em;
    text-align: center;
    transition: background-color 0.3s, opacity 0.3s;
    opacity: 0;
    visibility: hidden;
}

.page-top-link::after {
    content: "\E911";
    font-family: "design_plus";
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    font-size: 12px;
    width: 12px;
    height: 12px;
}

.page-top-link:hover {
    background-color: rgba(242, 128, 15, 1);
    background-color: rgba(102 , 192, 163, 1); 
}

/* スクロール時にJSで付与するクラス */
.page-top-link.is-show {
    opacity: 1;
    visibility: visible;
}



/* ==============================================
   レスポンシブデザイン (ブレークポイント)

   1200px 以上
       1rem = 10px (font-size: 62.5%;) 

    -- max-width: 1199px 以下 (ノートPC未満 / タブレット横向き) --
       1rem = 9px (font-size: 56.25%;)

    -- max-width: 991px 以下 (タブレット縦向き) --
       1rem =  8px (font-size: 50%;) 

    -- max-width: 767px 以下 (スマートフォン) --
       1rem =  7px (font-size: 43.75%;) 

    -- max-width: 519px 以下 (スマートフォン) --
       1rem =  6px (font-size: 37.5%;)

    -- max-width: 375px 以下 (スマートフォン最小幅) --
       1rem =  5px (font-size: 31.25%;)
   ============================================== */


/* ----------------------------------------------------
   max-width: 1199px (ノートPC未満 / タブレット横向き)
---------------------------------------------------- */
@media (max-width: 1199px) {

    /* 1rem = 9px (font-size: 56.25%;) */
    html {
        font-size: 56.25%;
    }

    /* problem__title-wrap::after の border 幅を調整 */
    .problem-section .problem__title-wrap::after {
        border-right: 62.0rem solid transparent; 
        border-left: 62.0rem solid transparent;
        
        /* 適切な位置に再配置設定は維持 */
        left: 50%;
        transform: translateX(-50%);
    }

    .message__button {
        width: 90%;
    }

    .message__button .button__cta-message {
        width: 65%;
        border: 4px solid #f2800f;
        font-size: 2.2rem;
    }

    .message__button .button__cta-text {
        width: 96%;
    }

    .contact__sub-heading {
        font-size: 3.8rem;
    }


}



/* ----------------------------------------------------
   max-width: 991px (タブレット縦向き)
---------------------------------------------------- */
@media (max-width: 991px) {

    /* 1rem =  8px (font-size: 50%;)  */
    html {
        font-size: 50%;
    }

    .header__contact {
        gap: 2.0rem;
    }

    .mv_merit__list {
        gap: 4.5rem;
        width: 83%;
    }

    .problem__image-group {
        max-width: 770px;
        margin-top: -5rem;
    }

    .problem__item {
        margin-bottom: 3rem;
    }

    .message__button {
        width: 90%;
    }

    .message__button .button__cta-message {
        width: 60%;
        border: 3px solid #f2800f;
        font-size: 2.3rem;
    }

    .message__button .button__cta-text {
        width: 96%;
    }

    .repowering__merit-list {
        margin: 6.0rem 1rem 6.0rem;
    }

    .repowering__merits-title {
        line-height: 1.4;
        padding: 2.0rem 1.0rem;
    }

    .choice__message {
        font-size: 4.3rem;
    }

    .point__list {
        gap: 2.5rem;
    }

    .value__merit-list {
        margin: 2.0rem 0 4.5rem 7.0rem;
    }

    .point-item {
        padding: 2.0rem 1.0rem 2.5rem;
    }

    .point-item__title {
        font-size: 3.5rem;
    }

    .case-section h4 {
        line-height: 1.4;
    }

    .case-single__merit-list {
        margin: 4.5rem 4.0rem 3.0rem 4.0rem;
    }

    .case-single__cost-summary {
        font-size: 3.5rem;
        margin-bottom: 1.5rem;
    }

    /* --- コンタクトラップ --- */
    .contact-section .contact__cta-wrap {
        width: 96%;
    }
    .contact-section .contact__phone-group {
        transform: scale(0.95)
    }
    .contact-section .contact__line-group {
        transform: scale(0.95)
    }


}



/* リパワリング工事をする場合としない場合の比較図 横スクロール*/
/* @media screen and (max-width: 991px) {
    .choice__image-wrap {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1.0rem 0;
    }
    .choice__image-wrap img {
        width: 1000px; 
        height: auto; 
        display: block;
    }
} */



/* ----------------------------------------------------
   max-width: 767px (スマートフォン)
---------------------------------------------------- */
@media (max-width: 767px) {

    /* 1rem =  7px (font-size: 43.75%;)  */
    html {
        font-size: 43.75%;
    }

    .inner {
        padding: 0 1.6rem; 
    }

    .header .inner {
        padding: 1.5rem 1.6rem;
    }
    
    /* 電話テキストグループは常に表示 */
    .header__phone-text-group {
        display: block; 
    }

    .header__phone-number {
        font-size: 2.4rem;
    }

    .header__phone-hours {
        font-size: 1.4rem;
    }

    .header__contact {
        gap: 1.0rem;
    }

    .header__mail-link {
        transform: scale(0.8);
    }

    .header__line-wrap {
        transform: scale(0.8);
    }

    .mv_merit {
        position: relative;
        z-index: 5;
        top: -15px;
        padding: 0 0 0 11.0rem;
    }

    .problem-section .problem__title-wrap::after {
        border-top:10rem solid #fcec53;
        border-right: 47.5rem solid transparent;
        border-left: 47.5rem solid transparent;
        /* 適切な位置に再配置 (767px未満では left: 50% のままでOK) */
        left: 50%;
        transform: translateX(-50%);
    }

    .problem-section h2 {
        line-height: 1.2;
        top: -1rem;
    }

    .problem-section .problem__title-wrap {
        height:65px;
    }

    .problem-section .problem__sub-title {
        top:1.8rem;
    }

    .problem__item {
        font-size: 2.8rem;
    }

    .message__button {
        width: 90%;
    }

    .message__button .button__cta-message {
        width: 65%;
        border: 3px solid #f2800f;
        font-size: 2rem;
    }

    .message__button .button__cta-text {
        font-size: 4.2rem;
        width: 96%;
    }

    .choice__sub-heading {
        font-size: 2.8rem;
    }

    .contact__button .button__cta-text {
        font-size: 3.3rem;
    }

    .contact__button .button__cta-text span {
        font-size: 2.7rem;
    }

    .button__cta-message br {
        display: none;
    }

    .repowering__image-wrap.repowering-block__image-wrap img {
        width: 90%;
    }

    img.value__graph-image {
        width: 90%;
        margin-bottom: 4.0rem;
    }

    .point-item__image {
        max-width: 85%;
    }

    .case-single__image-wrap img {
        width: 85%;
    }

    .value__case-caption {
        width: 90%;
    }

    .value__merit-item {
        padding-left: 4.5rem;
        line-height: 1.4;
        margin-bottom: 1.5rem;
    }

    .value__final-message {
        font-size: 4rem;
    }

    .value__final-message span {
        font-size: 4rem;
    }

    .point__sub-heading {
        font-size: 2.8rem;
    }

    .point-item__title {
        font-size: 3.3rem;
    }

    .case-single__cost-summary {
        font-size: 2.8rem;
    }

    section.case-section {
        margin-bottom: 10.0rem;
    }

    .faq-section .inner {
        padding-top: 4.6rem;
        padding-bottom: 10.0rem;
    }

    .faq-item {
        padding: 3.0rem 3.0rem 1.0rem 3.0rem;
    }
    

    /* 問い合わせセクション */
    .contact-section .contact__cta-wrap {
        flex-direction: column;
        margin: 4.0rem auto;
        text-align: left;
        gap: 2.0rem;
    }

    .contact-section .contact__phone-group {
        width: 80%;
        margin: 0 auto;
        transform: scale(1);
    }

    .contact-section .contact__phone-group img {
        width: 15%;
    }

    .contact-section .contact__line-group {
        width: 80%;
        margin: 0 auto;
        margin-bottom: 2.0rem;
        gap: 2.5rem;
        border-left:none;
        padding-left: 0rem;
        transform: scale(1);
    }
    
    .contact-section .contact__line-note {
        font-size: 2rem;
        width: 74%;
    }

    .contact-section .contact__line-group a {
        width: 15%;
    }

    .contact-section .contact__line-group img {
        width: 100%;
    }

    .contact-section .contact__phone-number {
        font-size: 6rem;
    }

    .contact-section .contact__cta-body {
        padding: 6.0rem 1.6rem 3.0rem;
    }

    .contact-section .contact__phone-group img {
        transform: scale(0.8)
    }

    .contact-section .contact__line-group img {
        transform: scale(0.8)
    }

    .contact__sub-heading {
        font-size: 2.4rem;
    }
    
    .contact__box {
        padding: 3.0rem 2.0rem;
    }
    .contact__text-sub {
        font-size: 1.8rem;
    }
    .contact__tel-number {
        font-size: 3.6rem;
    }
    .contact__text-hours {
        font-size: 1.6rem;
    }

    /* 共通 */
    br.br-sp {
        display: block;
    }


}


/* リパワリング工事をする場合としない場合の比較図 横スクロール*/
/* @media screen and (max-width: 767px) {
    .choice__image-wrap img {
        width: 900px; 
    }
} */


 /* 施工事例 横スクロール*/
/* @media screen and (max-width: 767px) {
    .value__image-wrap {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 5.0rem 3.0rem;
    }
    .value__image-wrap img {
        width: 700px; 
        height: auto; 
        display: block;
    }
}  */



/* ----------------------------------------------------
   max-width: 519px (スマートフォン最小幅)
---------------------------------------------------- */
@media (max-width: 519px) {

    /* 1rem =  6px (font-size: 37.5%;) */
    html {
        font-size: 37.5%;
    }

    .header__logo-title {
        font-size: 2.2rem;
    }
    .header__logo-sub-title {
        font-size: 1.4rem;
    }
    
    .header__phone-group {
        justify-content: center;
        flex-grow: 1;
        gap: 3px;
    }

    .header__phone-text-group {
        text-align: left;
        text-align: center;
    }

    .header__mail-link {
        display: none; 
    }

    .header__line-wrap {
        display: none;
    }

    .problem-section .problem__title-wrap::after {
        border-top: 7rem solid #fcec53;
        border-right: 43rem solid transparent;
        border-left: 43rem solid transparent;
        /* 適切な位置に再配置 (767px未満では left: 50% のままでOK) */
        left: 50%;
        transform: translateX(-50%);
    }

    .problem-section .problem__title-wrap {
        height: 75px;
    }

    .problem-section .problem__sub-title {
        top: -1rem;
    }

    .problem__image-group img {
        width: 32%;
        height: 32%;
    }

    .problem__item {
        font-size: 2.8rem;
        padding: 1.5rem 2rem;
        margin: 0 0.5rem 3.0rem;
    }

    .problem__list-wrap {
        margin-top: 8.0rem;
    }

    .problem__image-group {
        width: 80%;
    }

    .message__button {
        width: 95%;
    }

    .message__button .button__cta-message {
        width: 65%;
        border: 2px solid #f2800f;
        font-size: 2rem;
    }

    .message__button .button__cta-text {
        font-size: 3.8rem;
    }

    .message__button .button__cta-text span {
        font-size: 3.1rem;
    }

    .contact__button .button__cta-text {
        font-size: 2.7rem;
    }

    .contact__button .button__cta-text span {
        font-size: 2.1rem;
    }

    .point-item {
        width: 100%;
    }

    .repowering__definition {
        padding: 0 1.0rem;
    }

    .repowering-merit-item {
        gap: 2.8rem;
    }

    .repowering-section h2 {
        font-size: 4rem;
        margin-top: 0;
        padding: 0;
    }

    .repowering__merits-title {
        font-size: 3.7rem;
        line-height: 1.4;
        padding: 2.0rem 1.0rem;
    }

    .repowering-merit-item__icon01 {
        width: 5.6rem;
        height: 5.9rem;
    }

    .repowering-merit-item__icon02 {
        width: 3.7rem;
        height: 6.3rem;
    }

    .repowering-merit-item__icon03 {
        width: 5.8rem;
        height: 4.8rem;
    }

    .repowering__merit-list {
        margin: 3.0rem 1.6rem;
    }

    .repowering__sub-heading {
        font-size: 3rem;
    }

    .repowering-merit-item__header {
        width: 14.0rem;
        height: 14.0rem;
        border: 2px solid #1dab39;
    }

    .repowering__image-wrap.repowering-block__image-wrap img {
        width: 80%;
    }

    .repowering-merit-item__title {
        font-size: 3.5rem;
    }

    .choice__title {
        font-size: 4rem;
    }

    .choice__message {
        font-size: 4rem;
    }

    .choice__sub-heading {
        font-size: 2.3rem;
    }

    .choice__title span {
        padding: 0 2.0rem;
    }

    .value-section h2 {
        font-size: 4rem;
    }

    .value-section h2 span {
        font-size: 4rem;
        padding: 0;
    }

    .value__merit-list {
        margin: 2.0rem 0 4.5rem 2.0rem;
    }

    .value__final-message {
        font-size: 3.6rem;
    }

    .value__final-message span {
        font-size: 3.6rem;
    }

    .point__title {
        font-size: 4rem;
    }

    .point__title span {
        font-size: 5rem;
    }
    .point-item__title {
        font-size: 3.7rem;
    }

    .point-item__text {
        font-size: 2.5rem;
    }

    .point__list {
        padding: 0 3.0rem;
    }

    .case-section h4 {
        font-size: 3.7rem;
    }

    .case-single__cost-graph-wrap > div {
        flex-direction: column; 
        width: 100%; 
        max-width: none; /* PC用の max-width: 818px の制約をここで解除 */
        padding: 0 1.5rem; 
    }

    .point__sub-heading {
        font-size: 2.6rem;
    }

    .case-single__cost-summary {
        font-size: 2.6rem;
    }

    .case-single__cost-graph-wrap {
        padding: 7.0rem 3.0rem 3.0rem 3.0rem;
        width: 90%;
    }

    .case-single__cost-graph1 {
        width: 60%; 
        max-width: 60%; 
        margin: 0 auto;
        margin-bottom: 3.0rem;
    }

    .case-single__cost-graph2 {
        width: 94%; 
        margin: 0 auto;
    }

    .case-single__merit-list {
        margin: 3.0rem 1.6rem;
    }

    .case-single__merit-item {
        gap: 2.8rem;
    }

    .case-single__merit-icon-wrap img {
        width: 100%;
        height: auto;
    }

    .case-single__merit-heading {
        font-size: 3rem;
    }

    .faq-item__q {
        font-size: 3.1rem;
    }

    .faq-item__a {
        font-size: 2.8rem;
    }

    .contact-section .contact__phone-number {
        font-size: 5rem;
    }


}


/* リパワリング工事をする場合としない場合の比較図 横スクロール*/
/* @media screen and (max-width: 519px) {
    .choice__image-wrap img {
        width: 500px; 
    }
} */
/* 画像の幅を、親要素の幅（100%）よりも大きく設定する */
/* 例: 画像の実際のサイズに合わせて 1500px など具体的な値を設定 */


/* 施工事例 横スクロール*/
/* @media screen and (max-width: 519px) {
    .value__image-wrap img {
        width: 500px; 
    }
} */
/* 画像の幅を、親要素の幅（100%）よりも大きく設定する */
/* 例: 画像の実際のサイズに合わせて 1500px など具体的な値を設定 */



/* ----------------------------------------------------
   max-width: 375px (スマートフォン最小幅)
---------------------------------------------------- */
@media (max-width: 375px) {

    /* 1rem =  5px (font-size: 31.25%;) */
    html {
        font-size: 31.25%;
    }

    .problem-section .problem__title-wrap {
        height: 60px;
    }

    .problem__item {
        font-size: 2.6rem;
    }

    .case-single__cost-summary {
        font-size: 2.5rem;
    }


}



/* 横幅が768px以上で、電話番号リンクは無効 */
@media (min-width: 768px) {
a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
}
}