/* CSSの先頭に追加 */
@font-face {
    font-family: 'Noto Sans JP';
    src: url('../fonts/NotoSansJP-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url('../fonts/NotoSansJP-Bold.ttf') format('truetype');
    font-weight: 700;
}

body {
    min-height: 100vh;
    font-family: 'Noto Sans JP', sans-serif;
    overflow-x: hidden;
    width: 100%;
}

/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --header-height: clamp(40px, calc(40px + (80 - 40) * ((100vw - 390px) / (1000 - 390))), 80px);
}


/* ヘッダー */
.header {
    width: 100%;
    background-color: #4DB524;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-logo {
    height: 70%;
    width: auto;
    object-fit: contain;
}

/* メインビジュアル*/
.main-visual {
    width: 100%;
    background-color: #F5F5F5;
    line-height: 0;
    margin-bottom: 0;
}

.main-visual picture {
    display: block;
    width: 100%;
}

.main-visual__img {
    display: block;
    width: 100%;
    height: auto;
}





/* LINEに問い合わせる*/
.content-wrapper {
    width: 100%;
    background-color: #4DB524;
    margin-top: 0;
    overflow-x: hidden;
}

.specific-section {
    margin-top: 30px;
}

.specific-section .content-image {
    width: fit-content;
    margin: 0 auto; /* 左右の余白を自動設定して中央に配置 */
    display: flex; /* 必要に応じてフレックスを利用 */
    justify-content: center; /* フレックス内で中央揃え */
}


.custom-image-text {
    position: relative;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: white;
}

.custom-image-text::before,
.custom-image-text::after {
    position: absolute;
    top: -0.5rem;
    height: 4.8rem;
    content: '';
    margin:10px;
}
.custom-image-text::before {
    border-left: solid 3px;
    left: -35px;
    transform: rotate(-25deg);
}
.custom-image-text::after {
    border-right: solid 3px;
    right: -35px;
    transform: rotate(25deg);
}


/* 友達追加で全員にプレゼント*/
.specific-text-color {
    color: rgb(0, 0, 0); /* 文字色の変更 */
    margin-top:30px;
    font-size:16px;
}

.specific-text-color::before,
.specific-text-color::after {
    position: absolute;
    height: 2rem;
    content: '';
}
.specific-text-color::before {
    border-left: solid 3px;
    left: -8%;
    transform: rotate(-25deg);
}
.specific-text-color::after {
    border-right: solid 3px;
    right: -7%;
    transform: rotate(25deg);
}


/* 新しい画像ボックスのスタイル */
.content-image {
    width: 100%;
    background-color: rgba(255, 255, 255, 0);
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative !important;
}

.content-image__img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 「ふたり」の画像だけ */
.content-image .content-image__img--absolute {
    width: 90%;   /* 例：幅60%に */
    height: auto;
  }

.content-images {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

/* ボタン画像を含むcontentにのみパディングを追加 */
.content:has(img[src*="botann"]) {
    padding-bottom: 30px;
}

/* ボタン画像を含むcontentのスタイル */
.content:has(img[src*="botann"]) .content-image {
    width: 90%;  /* 100%から90%に縮小 */
    margin: 0 auto;  /* 中央寄せ */
}

.content:has(img[src*="botann"]) .content-image__img {
    width: 100%;
    height: auto;
}



/* 円ロゴのスタイル */
.content:has(img[src*="enn_white"]) .content-image {
    padding: 0;
    background-color: transparent;
}



/* ライムの円SVGのスイル */
.content:has(img[src*="raimu_enn"]) .content-image {
    padding: 0;
    background-color: transparent;
}



/* 子育て環境について */
.heading-block{
    background-color: white;
}
.white-background {
    margin-bottom: 45%;
}
.content-image__img--custom {
    height: auto; /* 高さを自動調整 */
}
.content-image__img--absolute {  
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 20px 80px 20px;
}

.heading-block__title {
    text-align: center;
    line-height: 1;
    font-weight: bold;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding-top: 30px;
    padding-bottom:80px;
}

.heading-block__wrapper {
    position: relative;
    display: inline-block;
}

.heading-block__small {
    font-size: 14px;
    color: #4E4E4E;
    text-align: center;
    width: 100%;
    margin-bottom: 5px;  /* 下の要素との間隔を調整 */
}

.heading-block__large {
    font-size: 32pt;
    display: inline;    /* blockからinlineに変更 */
    color: #4E4E4E;
}

.heading-block__medium {
    font-size: 16pt;
    display: inline;    /* blockからinlineに変更 */
    color: #ffffff;
}

.heading-block__green {
    color: #4DB524;
    display: block;
    margin-top: 5px;
}

.heading-block--dark-green {
    background-color: #4DB524;
    color: #fff;  /* 背景が濃い緑なので、テキストを白に */
}

.heading-block--neighbor-research {
    background-color: #4DB524;
}

.heading-block--neighbor-research .heading-block__title {
    background-color: transparent;
    color: #fff;  /* タイトル全体を白に */
    padding: 50px 0px 30px;  /* 下のパディングを15pxに減らす */
}

.heading-block--neighbor-research .heading-block__medium {
    font-size: 8pt !important;  /* サイズを8ptに変更 */
}

.heading-block--neighbor-research .heading-block__large {
    color: #fff !important;
    font-size: 32pt !important;  /* 隣人調査のサイズはそのまま */
}

.heading-block--neighbor-research .heading-block__main {
    margin-bottom: 5px;
}

/* 掲示板の背景色 */
.special-content .content-image {
    background-color: #D5F4C8; 
    width: 100%;
    padding: 0 20px 30px;
}




.image-text-wrapper {
  position: relative;
  width: 100%;
}

.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: bold;
  text-align: center;
  white-space: normal;
  line-height: 1.4;
  width: 100%;
  font-size: 18px; /* フォントサイズを小さく変更 */
}




/* \調査報告書サンプルは、ラインからダウンロード！/ */
.hukidasi-image-text {
    color: rgb(255, 255, 255); /* 文字色の変更 */
    font-size:20px;
}

.hukidasi-image-text::before,
.hukidasi-image-text::after {
    position: absolute;
    top:-0.1rem;
    height: 3rem;
    content: '';
    margin:10px;
}
.hukidasi-image-text::before {
    border-left: solid 3px;
    left: -30px;
    transform: rotate(-25deg);
}
.hukidasi-image-text::after {
    border-right: solid 3px;
    right: -30px;
    transform: rotate(25deg);
}


/* となり不動産の特徴の3つのボックス用スタイル */
.heading-block--dark-green + .content .square-text--large {
    font-size: 24px;
    font-weight: bold;
    color: #4DB524;
    display: inline-block;
}

.heading-block--dark-green + .content .square-text--small {
    font-size: 12px;
    display: block;
    margin-top: 8px;
    line-height: 1.4;
}


.square-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #4E4E4E;
    font-size: clamp(10px, 1.5vw, 16px);  /* フォントサイズを小さく変更 */
    font-weight: bold;
    text-align: center;
    width: 90%;
    line-height: 1.4;
}

.square-text--large {
  font-size: clamp(16px, 2.2vw, 20px);
  display: inline-block;
  margin-bottom: 5px;
}

.grid-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
}

.grid-item {
    position: relative;
    width: 100%;
    height: 100%;
}

.grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.grid-text {
    position: absolute;
    color: #4E4E4E;
    font-size: clamp(12px, 1.8vw, 18px);
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
}

/* 各コーナーのテキスト位置 - PC用 */
.grid-item:nth-child(1) .grid-text {
    top: clamp(35px, 3vw, 45px);
    left: clamp(25px, 2.5vw, 30px);
}

.grid-item:nth-child(2) .grid-text {
    top: clamp(30px, 2.5vw, 35px);
    right: clamp(25px, 2.5vw, 30px);
}

.grid-item:nth-child(3) .grid-text {
    bottom: clamp(40px, 3vw, 45px);
    left: clamp(25px, 2.5vw, 30px);
}

.grid-item:nth-child(4) .grid-text {
    bottom: clamp(40px, 3vw, 45px);
    right: clamp(25px, 2.5vw, 30px);
}


.grid-item:nth-child(1) .grid-text {
    top: 25px;
    left: 20px;
}

.grid-item:nth-child(2) .grid-text {
    top: 25px;
    right: 20px;
}

.grid-item:nth-child(3) .grid-text {
    bottom: 35px;
    left: 20px;
}

.grid-item:nth-child(4) .grid-text {
    bottom: 35px;
    right: 20px;
}


.content-image--half {
    max-width: 50%;  /* 幅を半分に */
    margin: 0 auto;  /* 中央寄せ */
    padding: 0;  /* パディングを削除 */
}

.neighbor-research-text {
    color: #fff;
    text-align: left;
    line-height: 1.8;
    padding: 0 40px;
    font-size: 14px;  /* 12ptから10ptに変更 */
    max-width: 800px;
    margin: 0 auto;
    margin:20px auto 60px;
}

.content--margin-top {
    margin-top: 40px;
}

.border-box {
    border: 2px solid #fff;
    border-radius: 30px;
    margin: 0 40px 20px;
    padding: 30px 20px;
    position: relative;
    display: flex; /* フレックスボックスを有効にする */
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    flex-direction: column; /* アイテムを縦に並べる */
    height:auto;
}

.border-box__title {
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    white-space: nowrap;
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 10px;
}

/* タイの背景用の疑似要素 */
.border-box__title::before {
    content: '';
    position: absolute;
    top: -10px;  /* 上部に少し余裕を持たせる */
    left: 0;
    width: 100%;
    height: calc(100% + 20px);  /* 上下に余裕を持たせる */
    background-color: #4DB524;
    z-index: -1;
}


.content-image--half > .content-image__img--unique {
    width: 250px; /* この親要素内だけ変更 */
    height: auto;
}

.check-list {
    list-style: none;
    padding: 0;
}

.check-list li {
    color: #fff;
    padding-left: 30px;
    margin-bottom: 15px;
    position: relative;
    line-height: 1.4;
    font-weight: bold;
    font-size: 20px;
}

/* 最後の項目のマージンを確実に0にする */
.check-list li:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0;
}

/* 丸（背景透過、白い線） */
.check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;    /* 4pxから5pxに変更してさらに下に移動 */
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
}

/* 白いチェックマーク */
.check-list li::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 9px;    /* 8pxから9pxに変更し���さらに下に移動 */
    width: 4px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

.check-list__sub {
    font-size: 12px;
    font-weight: normal;
    display: block;
    margin-top: 10px;
}


.border-box__title {
    font-size: clamp(18pt, 4vw, 20pt);
}


.border-box__title--accent {
    position: relative;
    display: inline-block;
}

.dots {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: -3px;
}

.dot {
    width: 5px;  /* 8pxから5pxに縮小 */
    height: 5px;  /* 8pxから5pxに縮小 */
    background-color: #fff;
    border-radius: 50%;
}


.check-list__highlight {
    color: #FEE64F;
}





/* 弊社の特徴のタイトルだけを特別に大きく */
.heading-block:has(.heading-block__medium:only-child) .heading-block__medium {
    font-size: clamp(36px, calc(36px + (48 - 36) * ((100vw - 320px) / (390 - 320))), 48px);
}


.heading-block:has(.heading-block__medium:only-child) .heading-block__medium {
    font-size: clamp(28px, 5vw, 36px);
}


.square-text--small {
    font-size: clamp(8px, 1.2vw, 12px);
    display: block;
    margin-top: 5px;
    line-height: 1.4;
}


.square-text--small {
    font-size: clamp(8px, 1vw, 10px);
    line-height: 1.2;
}

.features-section .heading-block__medium {
    color: #4D4D4D !important;
  }


.btn:hover {
    background-color: #000; /* ホバー時の背景色を黒に */
    color: #fff; /* ホバー時の文字色を白に */
}

.heading-block__title--special .heading-block__main {
    padding-bottom: 30px;
  }

.heading-block--dark-green + .content .square-container {
     display: flex;
    flex-direction: column;  /* 縦並び */
    gap: 30px;  /* アイテム間の間隔 */
    padding: 20px;
}

.heading-block--dark-green + .content .square-item {
    text-align: center;
    padding: 15px;
}

.heading-block--dark-green + .content .square-text {
    margin-top: 15px;
    line-height: 1.6;
}

.heading-block--dark-green + .content .square-text--large {
    font-size: 24px;
    font-weight: bold;
    color: #4DB524;
    display: inline-block;
    margin-bottom: 10px;
}

.heading-block--dark-green + .content .square-text--small {
    font-size: 12px;
    display: block;
    margin-top: 8px;
    line-height: 1.4;
}


.heading-block__sub {
    text-align: center;
    margin-top: 20px;
}

.heading-block__number {
    font-size: 1.5em;
    font-weight: bold;
    margin-right: 10px;
}

.heading-block__title--narrow {
    padding-bottom: 30px ;
  }

/* 弊社の特徴 */
.Card {
    width: 100%;
    display: flex;
    flex-direction: column; /* feature-item を縦に並べる */
    gap: 20px; /* feature-item 間のスペース */
    background-color: white;
    padding: 0 20px;
}

.feature-item {
    display: flex;
    flex-direction: column; /* スマホ版では縦並び */
    gap: 20px; /* Card__Content と Card-Image 間のスペース */
    align-items: center; /* スマホ版では中央揃え */
}

.Card__Content {
    width: 100%; /* スマホ版では全幅 */
    color: #4D4D4D;
}

.Card-Image {
    height:200px;
    margin:0 auto
}

.Card-ImageWrapper {
    display: flex;
    flex-direction: column;
    margin:0 auto
}

.Card-Note {
    font-size: 12px;
    margin-top: 10px;
    color: #4E4E4E;
    line-height: 1.5;
}

.feature-item__content {
    display: flex; /* 横並び */
    align-items: center; /* アイコンと見出しを中央揃え */
    gap:10px
}

.feature-item:nth-of-type(2) .feature-item__icon {
    width: 80px;
    height: 50px;
  }



.feature-item__icon[src*="1.png"] {
    width: 90px;   /* 特徴1だけ拡大 */
    height: 50px;
  }

.feature-item:nth-of-type(1) .feature-item__content {
    gap: 0px; /* 好きな値 */
  }


.feature-item__icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.Card-Headline {
    font-size: 24px;
    line-height: 1.4;
    margin: 0;
    font-weight: bold;
}

.Card-Text {
    margin-top: 14px;
    padding-left:60px;
}

/* 区切り線のスタイル */
.feature-item {
    padding: 0 0 20px 0;
    border-bottom: 1px solid #4D4D4D; /* 区切り線のスタイル */
}

/* 最後の feature-item の区切り線を非表示 */
.feature-item:last-child {
    border-bottom: none;
}


/* 切り分け用：この3つを一旦オフ */
.content.content--siroshita-bg { background-color: transparent !important; }




/* 白下SVGのスタイル */
.content:has(img[src*="siroshita"]) .content-image {
    padding: 0;
    background-color: transparent;
}
.feature-item:has(img[src*="huri-za"])::after {
    display: none;
}

.white-title {
    color: #fff; /* 白字 */
    text-align: center; /* 中央寄せ */
    font-size: clamp(32px, 5vw, 40px);
    font-weight: bold;
    padding: 40px 20px;
    line-height: 1.4;
    margin: 0 0 60px;
}


.content--margin {
    margin-top: 100px; /* このクラスを持つ要素にのみ適用 */
}
.custom-box {
    position: relative;
    width: 360px;
    max-width: 360px;
    border-radius: 20px;
    background: none;  /* 背景を無しに変更 */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.custom-box__top {
    position: relative;
    width: 360px;
    background-color: #D4F4C8;
    border-radius: 20px 20px 0 0;
    padding: 30px 20px;
}

.custom-box__bottom {
    position: relative;
    width: 360px;
    background-color: #fff;
    border-radius: 0 0 20px 20px;
    padding: 20px;
}

.custom-box__image {
    position: absolute;
    height: auto;  /* 高さは自動調整 */
    top: -60px;    /* 位置はそのまま */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.custom-box__text {
    display: flex;
    align-items: center;
    gap: 15px;
}

.custom-box__title {
    color: #4DB524;
    font-weight: bold;
    font-size: 20px;
}

.custom-box__description {
    color: #4E4E4E;
    font-size: 20px;
    text-align: center;
    line-height: 1.4;
    font-weight: bold;
}

.custom-box__sub {
    display: block;
    font-size: 14px;
    color: #4E4E4E;
    text-align: center;
    margin-top: 5px;
    font-weight: normal;
}

/* スマートフォン向けの調整 */
@media (max-width: 767px) {
    .custom-box__title {
        font-size: 16px;
    }
    
    .custom-box__description {
        font-size: 24px;  /* スマホ版は24pxに */
    }
    
    .custom-box__sub {
        font-size: 12px;  /* サブテキストは12pxのまま */
        margin-top: 8px;  /* 余白を少し増やす */
        font-weight: normal;
    }
}

@media (max-width: 767px) {
    .custom-box__image {
       
        height: 167px;
        top: -70px;
    }
}

/* contentクラスのスタイルを修正 */
.content:has(.custom-box) {
    padding: 20px 0;
    position: relative;
    z-index: 1;
}

/* カスタムボックスのスタイルを調整 */
.custom-box {
    width: 400px;
    margin: 0 auto;
    position: relative;
    height: 200px; /* 全体の高さを200pxに */
    background: transparent;
    z-index: 2;
}

.custom-box__top {
    height: 100px; /* 上部を100pxに */
    background-color: #ffffff;
    border-radius: 15px 15px 0 0;
    position: relative;
}

.custom-box__bottom {
    height: 100px; /* 下部を100pxに */
    background-color: #D5F4C8;
    border-radius: 0 0 15px 15px;
    position: relative;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}



.content--wide > .background-title {
    position: absolute;
    bottom: -50px;  /* 緑のボックスとの重なり具合を調整 */
    left: 50%;
    transform: translateX(-50%);
    color: #56C52B;
    font-size: clamp(180px, 15vw, 110px);  /* レスポンシブ対応 */
    font-weight: bold;
    z-index: 0;  /* ボックスの下に配置 */
    text-align: center;
    line-height: 1;
}

/* 追加：逆三角形のアイコンを赤いボックスで囲む */
.background-title::after {
    content: '';
    position: absolute;
}

/* 追加：赤いボックスを緑に変更 */
.background-title::before {
    content: '';
    position: absolute;
    bottom: -64px;
    left: 0;
    width: 100%;
    height: calc(100% + 80px);
    background-color: #4DB524;
    z-index: -1;
}

.background-title--simple::after {
    content: none;  /* afterを無効化 */
}

.background-title--simple::before {
    content: none;  /* beforeも無効化 */
}

.content--margin-custom {
    margin-bottom: 70px;  /* または必要な値に調整してください */
}



    


.green-background .background-title + .content {
    margin-top: 320px !important;  /* より強い指定にして確実に適用 */
    position: relative;  /* 位置関係を明確に */
    z-index: 1;
}

/* 追加：緑の背景内の最後のcontentに対する指定 */
.green-background > .content:last-child {
    margin-bottom: 100px;
}

/* 内見・お申し込みのカスタムボックスに対する角形の追加 */
.custom-box::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: #fff;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    z-index: 3;
}
/* 最後のカスタムボックスには三角形を表示しない */
.content--margin-custom .custom-box::after {
    display: none;
}






/* Q＆A*/
.qa-container {
    width: 100%;
    background-color: #fff;
}


.white-box__title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 30px;
    color: #4E4E4E;
}

.qa-content{
    padding:20px 25px;
}

.qa-card{
    background-color: #D4F4C8;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    max-width: 800px; /* 修正済み */
    width: 330px;
    height: auto;
    margin-bottom: 20px;
}

.qa-icon {
    position: absolute;
    top: -13px;
    left: -16px;
    width: 40px;
    height: 40px;
    background-color: #4DB524;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 24px;
    padding-bottom: 4px;
}

.qa-title {
    font-size: 18px;  /* 18pxから24pxに変更 */
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
    text-align: left;
}

.qa-marker {
    background: linear-gradient(transparent 60%, #FFE566 60%);
    padding: 0 2px;
    width: fit-content;
}



/* QAボックスのコンテナを追加 */
.qa-container {
    width: 100%;
    background-color: #fff;
}

/* QAカードのマージンを調整 */
.qa-card {
    margin: 0 auto 40px auto;  /* 上下のマージンを20pxに */
}



.qa-text {
    font-size: 14px;
    line-height: 1.5;  /* 読みやすさのために行間を調整 */
}

.qa-wrapper{
    padding-bottom: 110px;
}


/* フッターのスタイル */
.footer {
    width: 100%;
    background-color: #4DB524;
    height: 290px;  /* 高さを400pxに設定 */
    position: relative; /* 追加: 相対位置を設定 */
}

.footer__content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* 中央揃えから左揃えに変更 */
    gap: 20px;
    padding: 60px 20px;
}

.footer__logo {
    width: auto;
    object-fit: contain;
}

.footer__info {
    text-align: left;  /* 中央揃えから左揃えに変更 */
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
}

.footer__company,
.footer__license {
    margin: 0;
}

/* フッターの説明書き用のスタイルを追加 */
.footer__description {
    color: #fff;
    font-size: 14px;
    text-align: left;  /* 中央揃えから左揃えに変更 */
    font-weight: normal;
}

/* フッターボタンのスタイル */
.footer__button {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    text-align: center; /* 中央揃え */
    margin-top: 20px; /* 上部マージンを増加 */
}

.footer__button--qa {
    margin: 0 auto;  /* または必要な上マージンの値 */
    padding:50px 0 60px 

}

.btn {
    display: flex;
    align-items: center;
    position: relative; /* ボタンを相対位置に設定 */
    padding: 12px 50px; /* パディングを増加 */
    box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.8); /* くっきりしたシャドウ */
    background-color: #fff; /* ボタンの背景色を白に */
    color: #000; /* ボタンの文字色を黒に */
    border: 2px solid #000; /* ボーダーを黒に */
    border-radius: 30px; /* 角を丸く */
    font-family: 'Noto Sans JP', sans-serif; /* フォントファミリーを追加 */
    cursor: pointer; /* カーソルをポインターに */
    transition: background-color 0.3s, color 0.3s; /* ホバー時のトランジション */
}

.muryou-icon,
.line-icon,
.sannkaku-icon {
    vertical-align: middle;
}

.line-text {
    line-height: 1;
    margin-top: -2px;
    font-size: 18px;
}

.sannkaku-icon {
    margin-left: 10px;
}

.btn:hover {
    background-color: #ffffff; /* ホバー時の背景色を黒に */
    color: #000000; /* ホバー時の文字色を白に */
}

.btn:active {
    transform: translateY(3px); /* クリック時に3px下に移動 */
}

.line-icon {
    width: 25px; /* アイコンの幅を増加 */
    height: auto; /* 高さは自動調整 */
    margin-right: 8px; /* ボタン内のテキストとの間にマージンを追加 */
    vertical-align: middle; /* テキストとアイコンを中央揃え */
    display: inline-block; /* インラインブロックにしてボタン内での配置を調整 */
}

.muryou-icon {
    width: 45px; /* アイコンの幅を増加 */
    height: auto; /* 高さは自動調整 */
    position: absolute; /* 絶対位置に設定 */
    top: -15px; /* ボタンの上からの距離 */
    left: -15px; /* ボタンの左からの距離 */
    z-index: 1; /* アイコンを前面に表示 */
}

.center-icon {
    display: block; /* ブロック要素にする */
    margin: 0 auto; /* 自動マージンで中央揃え */
}

.footer__present-icon {
    margin-bottom: -20px; /* 下部マージンを追加 */
}

.image-overlay {
    position: relative;
    display: inline-block; /* 画像をインラインブロックにする */
}

.overlay-image {
    position: absolute;
    top: 0; /* 必要に応じて位置を調整 */
    left: 0; /* 必要に応じて位置を調整 */
    width: 100%; /* サイズを調整 */
    height: auto; /* アスペクト比を維持 */
}
.footer__copyright {
    position: absolute; /* 追加: 絶対位置を設定 */
    bottom: 20px; /* 追加: ボックス内の最下部に配置 */
    left: 50%; /* 追加: 中央揃え */
    transform: translateX(-50%); /* 追加: 中央揃え */
    color: #fff;  /* テキストの色を白に設定 */
    font-size: 8px;  /* フォントサイズを調整 */
    margin-top: 0;  /* 上部マージンを削除 */
}





  .voice-heading-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #D4F4C8; /* 背景が必要な場合 */
    padding: 30px 0;
  }
  
  .voice-title {
    font-size: 32px;
    font-weight: bold;
    color: #4D4D4D;
  }
  .voice-no {
    font-size: 24px; /* 「の」だけ小さく */
    vertical-align: middle; /* 見た目のバランスを取る */
  }
  
  .voice-frame {
    width: 24px; /* 装飾の大きさは必要に応じて調整してください */
    height: auto;
  }
  
  .voice-frame--left {
    transform: scaleX(-1); /* 左を反転 */
  }
  
  
  .voice-main {
    font-size: 24px;
  }
  
  .voice-box {
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 40px;
    border-radius: 15px ;
  }
  
  .voice-icon-and-text {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .voice-icon {
    width: auto;
    height: auto;
  }
  
  .voice-info {
    display: flex;
    flex-direction: column;
  }
  
  .voice-highlight {
    font-size: 18px;
    font-weight: bold;
    color: #4DB524;
    line-height: 1.4;
  }
  
  .voice-age {
    font-size: 12px;
    color: #4D4D4D;
    margin-top: 2px;
  }
  
  .voice-line {
    border: none;
    border-top: 2px solid #DEE0E2;
    margin: 10px 0;
  }
  
  .voice-comment {
    font-size: 14px;
    color: #4D4D4D;
    line-height: 1.6;
  }
  
  .content--siroshita-bg {
    background-color: #D4F4C8;
  }
  



@media (min-width: 768px) {
    /* 内部コンテンツを中央60%に配置 */
    .content > .content-images,
    .content > .content-title,
    .content > .heading-block,
    .content > .border-box,
    .content > .neighbor-research-text,
    .content > .feature-item,
    .content > .custom-box {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
    .content-image__img--absolute {
        width: 60%; /* 幅を60%に設定 */
    }
    
    .special-content .content-image__img {
        width: 60%; /* 幅を60%に設定 */
        display: block; /* 必要に応じて調整 */
        margin: 0 auto; /* センター配置 */
    }


    /* 最大幅で表示する要素の例外処理 */
    .content > .main-visual,
    .content > .content-wrapper,
    .content:has(img[src*="siroshita"]) .content-image,
    .content:has(img[src*="enn_white"]) .content-image,
    .content:has(img[src*="raimu_enn"]) .content-image,
    .content:has(img[src*="muzi_keizibann"]) .content-image,
    .content:has(img[src="images/mati_siro.svg"]) .content-image, /* 既存 */
    .special-content .content-image { /* 追加 */
        width: 100%;
    }

    /* SURVEYの設定*/
    .content > .background-title {
        width: 120%; /* 幅を120%に設定 */
    }



     /* FVのサイズ変更*/
    .square-text {
        font-size: 16px;  /* PC版では16pxに */
    }
    .square-text--large {
        font-size: 22px;  /* PC版では22pxに */
    }

    /*付箋部分の変更*/
    .square-box {
        padding: 2% 10% 4%;
    }

    /* ボタン上の\/のサイズ変更*/
    .custom-image-text {
        font-size:26px ;
    }
    .custom-image-text::before,
    .custom-image-text::after {
        height: 5rem;
    }
    .custom-image-text::before {
        border-left: solid 4px;
        left: -30px;
    }
    .custom-image-text::after {
        border-right: solid 4px;
        right: -30px;
    }


    /* ボタン*/
    .btn {
        padding: 20px 60px; /* パディングを増加 */
        border-radius: 35px; /* 角を丸く */
    }
    .muryou-icon{
        width: 55px; /* アイコンの幅を増加 */ 
    }
    .line-text {
        font-size: 22px;
    }
    .footer__button {
        margin: 0px 0 120px;
    }
    .specific-section{
        margin: 80px 0 20px;
    }
    .footer__button--qa {
        padding: 50px 0 0 0;
    }



    /* 物件の子育て環境について
    タイトル文字の変更*/
    .heading-block__small {
        font-size: 24px;  /* PC版では24pxに */
        top: -30px;
    }
    .heading-block__large {
        font-size: 54px;  /* PC版では54pxに */
        margin-top: 10px;
    }
    .heading-block__medium{
        font-size: 28px;
    }
    .heading-block__green{
        font-size: 28px;
    }
    .heading-block__title{
        padding-top: 40px;
    }
    
    /* 子育て環境の設定*/
    .white-background {
        margin-bottom: -5%; /* マージンを0に設定 */
    }
    /*ふたりの写真の差し替え */
    .content-image__img--absolute {
        content: url("../images/speech-bubble_pc.svg");
        top: 0%; /* パソコン版のスタイル */
        transform: translate(-50%, 10%);
        padding: 0%;
        width: 78%;
    }    
    /* まち背景の写真さしかえ */
    .content-image__img--custom {
        margin-top: 400px; /* パソコン版のスタイル */
        content: url("../images/matihaikei_PC.svg");
    }


    /*住環境調査とは
    タイトルの文字サイズ変更 */
    .heading-block.heading-block--neighbor-research .heading-block__title .heading-block__wrapper .heading-block__main .heading-block__medium {
        font-size: 22px !important;  /* フォントサイズを22pxに設定 */
    }
    /*隣人調査の文字サイズ変更 */
    .heading-block.heading-block--neighbor-research .heading-block__title .heading-block__wrapper .heading-block__main .heading-block__large {
        font-size: 40px !important;  /* 32pxから40pxに大きく */
    }
    /*説明文の文字サイズ変更 */
    .neighbor-research-text {
        font-size: 18px;  /* フォントサイズを18pxに設定 */
    }
    .special-content .content-image__img--special {
        content: url('../images/property-funny_pc.webp');
    }
    .content-image--half > .content-image__img--unique {
        width: 320px; /* この親要素内だけ変更 */
        height: auto;
    }
    .special-content .content-image{
        padding: 100px 0 100px;
    }
    .heading-block--neighbor-research .heading-block__title{
        padding: 100px 0 60px ;
    }

    


    /*調査での実施事項
     タイトルの文字サイズの変更 */
     .border-box__title {
        font-size: 38px;  /* フォントサイズを38pxに設定 */
    }
    /*説明文の文字サイズ変更*/
    .check-list li {
        font-size: 26px;  /* フォントサイズを26pxに設定 */
    }
    /*補足文の文字サイズ変更*/
    .check-list__sub {
        font-size: 16px;  /* フォントサイズを16pxに設定 */
    }
    /*・・・の変更*/
    .dots {
        gap: 18px;
        transform:scale(1.6);
    }
    .border-box {
        padding: 100px 80px;
    }
    
    .check-list li {
        margin-bottom: 30px;
    }
    
    .neighbor-research-text{
        margin:50px auto 80px;
        padding: 0;
    }

    /*弊社の特徴
    タイトルの文字変更*/
    
    .heading-block:has(.heading-block__medium:only-child) .heading-block__medium {
        font-size: 44px;  /* フォントサイズを44pxに変更 */
    }
    /* １，２，３の説明文の文字変更*/
    .feature-item__text{
        font-size: 32px; 
    }
    /*補足文の文字サイズ変更*/
    .feature-item__description {
        font-size: 18px;  /* フォントサイズを18pxに変更 */
    }

    /* 弊社の特徴*/
    .Card-Image {
        width: 300px; /* お好みのサイズに変更 */
        height: auto; /* 縦横比を保つために必要 */
      }

    .Card {
        padding: 0 20%;
        gap: 40px;
        padding-bottom:40px;
    }
    .Card-Headline{
        font-size: 28px;

    }

    .feature-item {
        align-items: flex-start;; /* 上下を中央揃え */
        padding: 0 0 40px 0;
        gap:40px
    }
    .Card-Text{
        margin-top: 0px;
        padding-left: 76px;
        font-size: 18px;
    }

    .feature-item__icon {
        width: 70px;
        height: 70px;
    }

    
    
    .feature-item:nth-of-type(2) .feature-item__icon {
        width: 60px;
        height: 70px;
      }

    .feature-item:nth-of-type(2) .feature-item__content {
        gap: 20px; /* 好きな値に変更 */
      }

    .feature-item__content {
        align-self: flex-start; /* 親要素内で上揃え */
        margin-top: 0; /* 余分なマージンを削除 */
        gap: 5px;
    }
    .Card-Note {
        font-size: 16px;
        white-space: nowrap; /* 改行を無視して1行にする */
        margin-top: 30px;
      }
    
    .Card-Note br {
        display: none; /* <br> を消す */
        
      }
    .Card-Headline {
        white-space: nowrap; /* 自動改行を防ぐ */
      }
    
    .Card-Headline br {
        display: none; /* <br> を非表示にする */
      }

    .heading-block__title--narrow {
        padding-bottom: 60px;
        padding-top: 40px;
    }
    
    


    /* \調査報告書サンプルは、ラインからダウンロード！/ */
    .hukidasi-image-text {
        font-size:26px;
    }
    .hukidasi-image-text::before,
    .hukidasi-image-text::after {
        height: 4rem;
        margin:10px;
    }
    .hukidasi-image-text::before {
        border-left: solid 4px;
        left: -40px;
    }
    .hukidasi-image-text::after {
        border-right: solid 4px;
        right: -40px;
    }

    /* 弊社の特徴 1つ目*/
    .feature-item:nth-of-type(1) .feature-item__content {
        gap: 20px;
      }
    




    /*サービスの流れ
    タイトルの文字サイズ変更*/
    .white-title {
        font-size: 44px;  /* フォントサイズを48pxに設定 */
    }
    /*「相談・物件探し」見出しの文字サイズ変更*/
    .custom-box__description {
        font-size: 32px;  /* フォントサイズを32pxに設定 */
    }
    /*説明文の文字サイズ変更*/
    .custom-box__sub {
        font-size: 18px;  /* フォントサイズを18pxに設定 */
    }
    /* SURVEYの変更 */
    .content--wide > .background-title {
        bottom: 100px;
        font-size: clamp(280px, 15vw, 110px)
    }

    .custom-box {
        position: relative;
        width: 100%;
        border-radius: 20px;
        max-width: 100%;
    }
    .custom-box__top {
        width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 30px 20px;
    }
    
    .custom-box__bottom {
        width: 100%;
        border-radius: 0 0 20px 20px;
        padding: 20px;
    }

    .green-background > .content:last-child {
        margin-bottom: 100px;
    }
    

    
    /*ボックスのサイズ変更*/
    .custom-box {
        height: 280px; /* 全体の高さ */
    }
    .custom-box__top {
        height: 140px; 
    }
    .custom-box__bottom {
        height: 140px; 
    }
    /*マージンの調整*/
    .white-title {
        padding: 60px 60px 0px;
    }


    

    .content--margin {
        margin-top: 0px; /* このクラスを持つ要素にのみ適用 */
    }

    

    .custom-box__image {
        position: relative;
    }
    
    .custom-box__image--tel {
        width: 300px;
        height: auto;
        top: -100px; /* デフォルトの top 値 */
      }
    
      .custom-box__image--hearing {
        width: 300px;
        height: auto;
        top: -100px;
      }
    
      .custom-box__image--mousikomi {
        width: 270px;
        height: auto;
        top: -175px;
      }
    
      .custom-box__image--survey {
        width: 200px;
        height: auto;
        top: -130px;
      }
    
      .custom-box__image--keiyaku {
        width: 280px;
        height: auto;
        top: -100px;
      }
    
    /* エピソード集の写真サイズ変更*/
    .image-sasshi{
        width:600px;
        height:auto
    }
    
    .content:has(.custom-box) {
        padding: 80px 0;
    }

    .custom-box--tel {
  margin-bottom: 200px;
}

.custom-box--hearing {
  margin-bottom: 200px;
}

.custom-box--mousikomi {
  margin-bottom: 200px;
}

.custom-box--survey {
  margin-bottom: 200px;
}

.custom-box--keiyaku {
  margin-bottom: 200px;
}

.custom-box::after {
    bottom: -160px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: #fff;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    z-index: 3;
}
}
    
@media (min-width: 768px) {
    .qa-title{
      font-size: 26px;
      margin-bottom: 30px;
    }
    .qa-text {
      font-size: 18px;
    }
    .qa-card{
        background-color: #D4F4C8;
        width: 500px;
        height: auto;
        margin-bottom: 50px;
    }
    .qa-content{
        padding: 40px;
    }
    .white-box__title{
        font-size: 48px;
        margin-bottom: 60px;
    }
    
    .qa-wrapper{
        padding-bottom: 220px;
    }
  
    /*フッター文字サイズ変更 */
    .footer__description {
        font-size: 32px;  /* フォントサイズを18pxに変更 */
    }
    .footer__info {
        font-size: 18px;  /* フォントサイズを16pxに変更 */
    }   
    .footer__logo {
        width: 230px;  /* 好きなサイズに調整可能 */
        height: auto;  /* アスペクト比を保つ */
      }

    

    
    
    
      .voice-heading-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #D4F4C8; /* 背景が必要な場合 */
        padding: 50px 0 60px;
      }
      
      .voice-title {
        font-size: 44px;
        font-weight: bold;
        color: #4D4D4D;
      }
      .voice-no {
        font-size: 32px; /* 「の」だけ小さく */
        vertical-align: middle; /* 見た目のバランスを取る */
      }
      
      .voice-frame {
        width: 40px; /* 装飾の大きさは必要に応じて調整してください */
        height: auto;
      }
      
      .voice-frame--left {
        transform: scaleX(-1); /* 左を反転 */
      }
      
      
      .voice-main {
        font-size: 24px;
      }
      
      .voice-box {
        background-color: #fff;
        padding: 30px;
        margin-bottom: 60px;
        border-radius: 15px ;
      }
      
      .voice-icon-and-text {
        display: flex;
        align-items: center;
        gap: 20px;
      }
      
      .voice-icon {
        width: 90px;
        height: auto;
      }
      
      .voice-info {
        display: flex;
        flex-direction: column;
      }
      
      .voice-highlight {
        font-size: 22px;
        font-weight: bold;
        color: #4DB524;
        line-height: 1.4;
      }
      
      .voice-age {
        font-size: 16px;
        color: #4D4D4D;
        margin-top: 6px;
      }
      
      .voice-line {
        border: none;
        border-top: 2px solid #DEE0E2;
        margin: 10px 0;
      }
      
      .voice-comment {
        font-size: 18px;
        color: #4D4D4D;
        line-height: 1.6;
      }
      
      .content--siroshita-bg {
        background-color: #D4F4C8;
      }
      

}

/*ボタンの設定 */
/* デフォルトは両方隠す（安全） */
.btn--sp, .btn--pc { display:none; }

/* SP：リンクボタンだけ表示（～767px） */
@media (max-width: 767px) {
  .btn--sp { display:flex; }
}

/* PC：QRボタンだけ表示（768px～） */
@media (min-width: 768px) {
  .btn--pc { display:flex; }
}

/* :target を使ったCSSモーダル */
.qr-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;           /* 初期は非表示 */
  z-index: 1000;
}
.qr-modal__content {
  position: relative;
  width: min(90vw, 360px);
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}
.qr-modal__img { max-width:100%; height:auto; }
.qr-modal__close {
  position: absolute;
  top: 8px; right: 12px;
  font-size: 28px;
  text-decoration: none;
  color: #333;
}

.footer__button a {
    text-decoration: none; /* 下線を消す */
  }

/* :target になった時だけ表示 */
#qr-modal:target { display: block; }

/* モーダル自体はPCだけ使う想定なら、SPでは無効化も可能 */
@media (max-width: 767px) {
  #qr-modal { display: none !important; }
}

.footer__button .btn--sp,
.footer__button .btn--pc {
  display: none !important; /* ← 強制で上書き */
}

/* SP：リンクボタンだけ表示（～767px） */
@media (max-width: 767px) {
    .footer__button .btn--sp { display: flex !important; }
  }
  
  /* PC：QRボタンだけ表示（768px～） */
  @media (min-width: 768px) {
    .footer__button .btn--pc { display: flex !important; }
  }


/* 全体のレスポンシブ */
@media (max-width: 389px) {
    html, body {
      width: 390px;
      transform: scale(calc(100vw / 390)); /* 画面幅に合わせて自動縮小 */
      transform-origin: top left;
      overflow-x: hidden;
    }
  }

@media (min-width: 390px) and (max-width: 768px) {
    body {
        width: 100%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body {
        width: 1024px;
    }
}

@media (min-width: 1025px) {
    body {
        width: auto; /* 画面幅に合わせる */
        max-width: 1200px; /* 最大幅を制限 */
        margin: 0 auto; /* 中央寄せ */
    }
}