@charset "utf-8";
/* main_imgarea
------------------------------------------------------------*/
.main_imgarea {
    margin-top: 5px;
    margin-bottom: 3%;
    margin-left: 0px;
    margin-right: 0px;
}
.main_imgarea img {
    width: 100%;
}
.read_tx {
    font-size: 21px;
    color: #000;
    text-align: center;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 30px;
}
@media all and (max-width: 991px) {
    .read_tx {
        font-size: 18px;
        text-align: left;
    }
}
/* 査定
------------------------------------------------------------*/
.form_news_area {
    margin-top: 0px;
    margin-bottom: 3%;
    margin-left: 0px;
    margin-right: 0px;
}
.form_area {}
@media all and (max-width: 991px) {
    .form_area {
        margin-top: 20px;
    }
}
.form_input_area {
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color: #fff100;
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
    width: 100%;
}
.form_input_area:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    ;
    border-top: 15px solid #fff100;
}
.form_input_area input[type="text"] {
    width: 100%;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
    border: 1px solid #AFAFAF;
}
.top_form_button {}
.top_form_button img {
    transition: transform 0.3s ease; /* アニメーションの滑らかさを指定 */
}
.top_form_button img:hover {
    transform: translateY(-5px); /* 上に5px動かす */
}
.form_tel_area {
    margin-top: 20px;
}
.form_tel_tx {
    text-align: center;
    font-size: 25px;
    margin-bottom: 2px;
    font-weight: bold;
}
.form_telnumber {
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 100%;
    padding: 5px 10px;
    line-height: 1.5;
    text-decoration: none;
    color: #12aa39;
    font-weight: bold;
    border: 2px solid #12aa39;
    transition: 0.3s ease-in-out;
    font-size: 50px;
}
@media all and (max-width: 1600px) {
    .form_telnumber {
        font-size: 3.5vw;
    }
}
@media all and (max-width: 991px) {
    .form_telnumber {
        font-size: 5.5vw;
        margin-bottom: 30px;
    }
}
@media all and (max-width: 767px) {
    .form_telnumber {
        font-size: 8.5vw;
    }
}
@media all and (max-width: 575px) {
    .form_telnumber {
        font-size: 8.5vw;
    }
}
.form_telnumber:before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url("../images/home/tel_ico.svg");
    background-position: center;
    background-size: contain;
    margin-right: 20px;
}
@media all and (max-width: 575px) {
    .form_telnumber:before {
        width: 40px;
        height: 40px;
    }
}
.form_tel_time {
    font-size: 15px;
    color: #000;
    margin-top: 2px;
}
@media all and (max-width: 575px) {
    .form_tel_time:before {
        font-size: 16px;
        margin-top: 5px;
    }
}
/* 1. 全体を相対配置にして、中の要素を自由に配置できるようにする */
.submit-image-wrapper {
    position: relative;
    /* 必要に応じて幅と高さを調整 */
    width: fit-content;
}
/* 2. 元の[submit]ボタンを透明にして、画像の上に重ねる */
.submit-image-wrapper .wpcf7-submit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ボタンのスタイルを完全に透明にする */
    opacity: 0;
    cursor: pointer;
    /* デフォルトのborderやbackgroundを消す（任意） */
    border: none;
    background: transparent;
    z-index: 10; /* 画像より手前に配置 */
}
/* 3. 配置した<img>タグのスタイル調整 */
.submit-image-wrapper .custom-submit-image {
    /* 画像のサイズ調整（元のボタンのサイズに合わせて調整してください） */
    width: 100%;
    height: auto;
    /* 画像を下に敷く */
    z-index: 1;
    display: block; /* 余計な隙間を消す */
}
/* Contact Form 7のテキスト入力フィールドに適用するスタイル */
.form_input_area input[type="text"], .form_input_area input[type="email"], .form_input_area input[type="tel"] {
    /* Contact Form 7の<input>タグ自体にスタイルを適用 */
    width: 100%;
    padding: 5px; /* 上下左右5pxのpaddingをまとめる */
    border-radius: 5px;
    border: 1px solid #AFAFAF;
    box-sizing: border-box; /* paddingとborderをwidthに含める（推奨） */
    margin-bottom: 10px; /* 元のCSSのmargin-bottomをここで再現 */
}
/*.wpcf7-form-control-wrap input[type="text"],
.wpcf7-form-control-wrap input[type="email"],  メールアドレスも考慮 
.wpcf7-form-control-wrap input[type="tel"]  電話番号も考慮 
 {
   Contact Form 7の<input>タグ自体にスタイルを適用 
  width: 100%;
  padding: 5px;  上下左右5pxのpaddingをまとめる 
  border-radius: 5px;
  border: 1px solid #AFAFAF;
  box-sizing: border-box;  paddingとborderをwidthに含める（推奨） 
  margin-bottom: 10px;  元のCSSのmargin-bottomをここで再現 
}*/
/* CF7の自動生成される外側の要素（span.wpcf7-form-control-wrap）の調整 */
/* width: 100% の input を確実に動作させるために重要 */
.wpcf7-form-control-wrap {
    display: block; /* <span>タグをブロック要素化 */
    margin-bottom: 5px; /* あるいは、ここにマージンを持たせる方法もあります */
}
/* （参考）フィールド全体のエリアにスタイルを適用する場合 */
/* 例: フォーム全体を囲む要素や、各フィールドを囲む<p>タグなど */
.form_input_area .wpcf7-form p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0;
    line-height: 1; /* 行の高さを最小限に設定 */
}
/* ボタンの親要素 */
.top_form_button {
    text-align: center; /* ボタンを中央寄せ */
    margin-top: 10px;
}
/* ボタン本体 */
.top_form_button button {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-block;
}
/* news_area
------------------------------------------------------------*/
.news_area {
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 5%;
    padding-top: 5%;
    /*color: #727171;*/
    z-index: 1;
}
.news_wrap {
    padding-bottom: 5%;
    padding-top: 5%;
}
@media screen and (max-width: 767px) {
    .news_wrap {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.news_list {
    display: grid;
    grid-template-columns: 100px 100px auto 50px;
    grid-template-rows: auto;
    column-gap: 10px;
    row-gap: 10px;
    border-bottom: 1px solid #727171;
    padding-bottom: 3%;
    padding-top: 3%;
}
@media screen and (max-width: 991px) {
    .news_list {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        /*grid-template-rows   : 1fr 1fr;*/
    }
}
.news_list:hover {
    background-color: rgba(229, 229, 229, 0.5);
    transition: 1s;
}
.news_day {
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    font-weight: normal;
    margin-right: 15px;
}
.news_type {
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #009944;
    color: #fff;
    margin-right: 15px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
}
.news_tx {
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    white-space: nowrap; /* 折り返し無しにする */
    overflow: hidden; /* はみ出た部分を非表示 */
    text-overflow: ellipsis; /* 語尾を3点リーダーに */
}
.news_arrow {
    /*margin-top: 3%;*/
}
@media screen and (max-width: 991px) {
    .news_day {
        grid-column: 1 / 1;
        grid-row: 1 / 1;
    }
    .news_type {
        grid-column: 2 / 3;
        grid-row: 1 / 1;
    }
    .news_type2 {
        grid-column: 2 / 3;
        grid-row: 1 / 1;
    }
    .news_tx {
        grid-column: 1 / 4;
        grid-row: 2 / 2;
        font-size: 14px;
    }
    .news_arrow {
        grid-column: 4 / 4;
        grid-row: 2 / 2;
        justify-self: center;
    }
}
@media screen and (max-width: 575px) {
    .news_day {
        grid-column: 1 / 1;
        grid-row: 1 / 1;
    }
    .news_type {
        grid-column: 2 / 4;
        grid-row: 1 / 1;
    }
    .news_type2 {
        grid-column: 2 / 4;
        grid-row: 1 / 1;
    }
}
/* 悩み
------------------------------------------------------------*/
.nayami_area {
    margin-top: 4%;
    margin-bottom: 3%;
    margin-left: 0px;
    margin-right: 0px;
}
@media screen and (max-width: 575px) {
.nayami_area {
    margin-top: 10%;
}
}
.nayami_area img {
    width: 100%;
}
/* 詳細リンクボタン画像
------------------------------------------------------------*/
.details_btn_area {
    margin-top: 3%;
    /*margin-bottom: 3%;*/
    padding-top: 3%;
    padding-bottom: 3%;
    /*margin-left: 0px;
    margin-right: 0px;*/
    background-color: #12aa39;
}
.details_btn_area img {
    /*width: 100%;*/
}
.details_btn_area img:hover {
    opacity:0.7;
}
/* お客様の声
------------------------------------------------------------*/
.voice_area {
    /*background-color: #E2E2E2;*/
    padding: 5%;
}
.voice_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    column-gap: 20px;
    row-gap: 20px;
    margin-top: 5%;
    margin-bottom: 5%;
}
@media (max-width: 1199px) {
    .voice_box {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .voice_box {
        grid-template-columns: 1fr;
    }
}
.voice_item {
    background-color: #FFFFFF;
    padding: 20px;
    border-right: 1px solid #DCDCDC;
}
@media (max-width: 767px) {
    .voice_item {
        border-right: 0px solid #DCDCDC;
        border-bottom: 1px solid #DCDCDC;
    }
}
.voice_namebox {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
}
.voice_name {
    font-size: 18px;
    font-feature-settings: "palt";
}
.voice_name span {
    font-size: 32px;
    margin-left: 10px;
}
.voice_tx {
    font-size: 14px;
    font-feature-settings: "palt";
    display: -webkit-box;
    -webkit-box-orient: vertical; /* 垂直方向に配置 */
    overflow: hidden; /* 溢れた部分を隠す */
    text-overflow: ellipsis; /* 溢れた部分に「...」を表示 */
    -webkit-line-clamp: 3;
}
@media all and (max-width: 1399px) {
    .voice_namebox {
        padding-left: 0px;
        padding-right: 0px;
    }
    .voice_name {
        font-size: 15px;
    }
    .voice_name span {
        font-size: 23px;
        margin-left: 10px;
    }
    .voice_tx {
        font-size: 13px;
    }
}
@media all and (max-width: 1199px) {
    .voice_namebox {
        padding-left: 10px;
        padding-right: 10px;
    }
    .voice_name {
        font-size: 18px;
    }
    .voice_name span {
        font-size: 32px;
        margin-left: 10px;
    }
    .voice_tx {
        font-size: 14px;
    }
}
@media all and (max-width: 991px) {
    .voice_namebox {
        padding-left: 0px;
        padding-right: 0px;
    }
    .voice_name {
        font-size: 15px;
    }
    .voice_name span {
        font-size: 23px;
        margin-left: 10px;
    }
    .voice_tx {
        font-size: 13px;
    }
}
@media all and (max-width: 767px) {
    .voice_namebox {
        padding-left: 10px;
        padding-right: 10px;
    }
    .voice_name {
        font-size: 18px;
    }
    .voice_name span {
        font-size: 32px;
        margin-left: 10px;
    }
    .voice_tx {
        font-size: 14px;
    }
}
@media all and (max-width: 443px) {
    .voice_namebox {
        padding-left: 0px;
        padding-right: 0px;
    }
    .voice_name {
        font-size: 15px;
    }
    .voice_name span {
        font-size: 23px;
        margin-left: 10px;
    }
    .voice_tx {
        font-size: 13px;
    }
}
/* サービス
------------------------------------------------------------*/
.service_area {
    background-color: #e2e2e2;
    padding-top: 5%;
    padding-right: 5%;
    padding-left: 5%;
    padding-bottom: 6%;
    margin-top: 1%;
}
@media all and (max-width: 575px) {
    .service_area {
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 10%;
        margin-top: 5%;
    }
}
.service_box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    column-gap: 20px;
    row-gap: 20px;
    margin-top: 5%;
}
@media all and (max-width: 991px) {
    .service_box {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media all and (max-width: 575px) {
    .service_box {
        column-gap: 10px;
        row-gap: 10px;
    }
}
.service_item {
    text-align: center;
    padding: 20px;
    border: 5px solid #009944;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    transition: 1s;
    border-radius: 50px;
    background-color: #fff;
}
@media all and (max-width: 575px) {
    .service_item {
        padding: 10px;
        border-radius: 15px;
    }
}
.service_item img {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}
.service_item:hover {
    background-color: rgba(0, 153, 68, 0.2);
}
.service_ttl {
    font-size: 27px;
    margin-bottom: 0px;
    color: #009944;
    font-weight: bold;
}
@media all and (max-width: 575px) {
    .service_ttl {
        font-size: 20px;
        font-weight: bold;
    }
}
.top_service_button {
    background: #009944;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    max-width: 300px;
    padding: 5px 30px;
    font-family: "Noto Sans Japanese";
    text-decoration: none;
    color: #fff;
    line-height: 1.8;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.top_service_button:after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 2rem;
    font-size: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.3s;
    width: 6px;
    height: 6px;
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.top_service_button:hover {
    background-color: #00612B;
    color: #FFF;
}
.top_service_button:hover:after {
    right: 1.4rem;
}
/* アクセス
------------------------------------------------------------*/
.access_area {
    padding: 5%;
}
@media all and (max-width: 575px) {
    .access_area {
        padding-right: 10px;
        padding-left: 10px;
    }
}
.access_area img {
    padding-top: 20px;
}
.access_copy {
    font-size: 45px;
    font-weight: bold;
    font-feature-settings: "palt";
    line-height: 1.2;
}
.access_copy span {
    font-size: 70px;
}
@media all and (max-width: 1600px) {
    .access_copy {
        font-size: 3vw;
    }
    .access_copy span {
        font-size: 4vw;
    }
}
@media all and (max-width: 991px) {
    .access_copy {
        font-size: 6vw;
    }
    .access_copy span {
        font-size: 7vw;
    }
}
@media all and (max-width: 575px) {
    .access_copy {
        font-size: 8vw;
    }
    .access_copy span {
        font-size: 10vw;
    }
}
.access_tx {
    font-size: 17px;
    font-weight: bold;
    border-top: 1px solid #000000;
    margin-top: 5%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.n_table {
    clear: both;
    width: 100%;
    margin-bottom: 25px;
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    margin-top: 20px;
}
.n_table th {
    width: 25%;
    background-color: #f6f6f6;
}
.n_table td {
    width: 75%;
}
.n_table th, .n_table td {
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
    vertical-align: top;
    padding: 15px;
    border-bottom: 1px solid #000000;
    font-feature-settings: "palt";
    border-right: 1px solid #000000;
}
.tel_image {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}
/* 査定ボタン
------------------------------------------------------------*/
.satei_button_area {
    padding-top: 1%;
    padding-right: 5%;
    padding-left: 5%;
    padding-bottom: 5%;
}
@media all and (max-width: 575px) {
.satei_button_area {
    padding-top: 5%;
    padding-bottom: 10%;
}
}
.satei_button_box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    column-gap: 20px;
    row-gap: 20px;
    /*margin-top: 5%;*/
}
.satei_button a {
    background: #12aa39;
    border-radius: 15px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    max-width: 450px;
    padding: 10px 25px;
    font-family: "Noto Sans Japanese";
    text-decoration: none;
    color: #fff;
    line-height: 1.8;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 0.2em;
}
@media all and (max-width: 767px) {
    .satei_button a {
        font-size: 20px;
    }
}
@media all and (max-width: 575px) {
    .satei_button a {
        font-size: 18px;
    }
}
.satei_button a:after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 2rem;
    font-size: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.3s;
    width: 10px;
    height: 10px;
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.satei_button a:hover {
    background: #00612B;
    color: #FFF;
}
.satei_button a:hover:after {
    right: 1.4rem;
}