@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Hind:700);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Yuji+Syuku&display=swap');
/*.yuji-syuku-regular {
  font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
}
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}*/
/* 共通
------------------------------------------------------------*/
.h2ttl_c {
    font-size: 49px;
    color: #004187;
    text-align: center;
    letter-spacing: 0.5em;
    text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  .h2ttl_c {
    font-size: 3.5rem;
	  letter-spacing: 0.2em;
  }
}

.h2ttlsub_c {
  font-size: 20px;
  color: #595757;
  text-align: center;  
}
.read_tx {
  font-size: 1.8rem;
  color: #000;
  font-family: 'Noto Serif JP', serif;
  padding-left: 20px;
  padding-right: 20px;
}
/* スライドエリア
----------------------------------*/
.slide_area {
    position: relative;
    margin-top: 100px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 30px;
    border-width: 10px;  /*background: linear-gradient(to right, #004187 0%, #004187 50%, #ffffff 50%, #ffffff 100%);*/

}

@media all and (max-width: 991px) {
  .slide_area {
    /*background: linear-gradient(to bottom, #004187 0%, #004187 53%, #ffffff 53%, #ffffff 100%);*/
    padding-bottom: 20px;
  }
}
@media all and (max-width: 767px) {
  .slide_area {
    /*background: linear-gradient(to bottom, #004187 0%, #004187 48%, #ffffff 48%, #ffffff 100%);*/
	  margin-top: 50px;
  }
}
@media all and (max-width: 575px) {
  .slide_area {
    background: #ffffff;
  }
}
@media all and (max-width: 575px) {
  .slide_bg {
    background: #004187;
  }
}
.slide {
  padding-top: 5%;
  padding-right: 1%;
  padding-bottom: 5%;
  padding-left: 1%;
}

.slide-media img {
    width: 100%;
    border: 20px solid #004187;
}
/* 査定
------------------------------------------------------------*/
.form_area {}
@media all and (max-width: 991px) {
  .form_area {
    margin-top: 20px;
  }
}
.form_ttl {
    text-align: center;
    margin-top: 7%;
    margin-bottom: 15px;
    color: #FFFFFF;
    background-color: #ED6700;
    border-radius: 10px;
    font-size: 35px;
    padding-top: 10px;
    padding-bottom: 10px;
}
@media all and (max-width: 575px) {
.form_ttl {  
  font-size: 28px;
}
}
.form_input_area {
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color: #D7D7D8;
    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 #D7D7D8;
}
.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 a {
  background: linear-gradient(180deg, #89a5d5 0%, #89a5d5 50%, #004187 50%, #004187 100%);
  border-radius: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 100%;
  padding: 10px 20px;
  line-height: 1.8;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  border-bottom: 5px solid #A7A7A7;
  transition: 0.3s ease-in-out;
  font-size: 36px;
}
@media all and (max-width: 575px) {
.top_form_button a {  
  font-size: 28px;
}
}
.top_form_button a:before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url(../img/home/form_ico01.svg);
  background-position: center;
  background-size: contain;
  position: absolute;
  left: 2rem;
}
.top_form_button a:after {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url(../img/home/form_ico02.svg);
  background-position: center;
  background-size: contain;
  position: absolute;
  right: 2rem;
}
/*.top_form_button a:hover:after {
  right: 1.4rem;
}*/
.top_form_button a:hover {
  background: linear-gradient(180deg, #004187 0%, #004187 50%, #89a5d5 50%, #89a5d5 100%);
  color: #FFF;
  border-bottom: solid 2px #999;
  transform: translateY(3px);
}
.top_form_button a:hover:before {
  color: #fff;
}
.form_tel_area {
    margin-top: 20px;
}
.form_tel_tx {
    text-align: center;
    font-size: 25px;
    margin-bottom: 2px;
}
.form_telnumber {
  border-radius: 10px;  
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 100%;
  padding: 10px 10px;
  line-height: 1.2;
  text-decoration: none;
  color: #004187;
  font-weight: 500;
  border: 2px solid #004187;
  transition: 0.3s ease-in-out;
  font-size: 3.0vw;
}
@media all and (max-width: 991px) {
.form_telnumber {  
  font-size: 5.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("../img/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;
    
}
}

.wpcf7-form-control-wrap {
    display: inline-block; /* Contact Form 7の各入力フィールドのラッパーをインラインブロックにする */
    vertical-align: middle; /* 垂直方向の配置 */
	width: 100%; 
}



/* Contact Form 7 のボタン（今回は不要ですが、念のため） */
.wpcf7-form-control.wpcf7-submit {
    display: inline-block; /* ボタンもインラインブロックにして横並びに対応 */
    vertical-align: middle;
}

/* 各入力フィールド（テキスト、メールなど）の調整 */
.wpcf7-form p input[type="text"],
.wpcf7-form p input[type="email"],
.wpcf7-form p textarea {
    flex-grow: 1; /* 入力フィールドがスペースを占めるように */
    width: 100%; /* 最大幅 */
}

/* --- */
/* --- */
/* ボタン全体の見た目となるコンテナのスタイル */
.top_form_button_wrapper {
    /* 必要に応じて調整: padding, margin, max-width など */
    margin: 0 auto; /* ボタン全体の中央寄せ */
    max-width: 100%;
    display: block; /* ブロック要素にして中央寄せしやすくする */
    text-align: center; /* 子要素のカスタムボタンを中央寄せ */
}

/* カスタム送信ボタン (見た目とクリック領域) のスタイル */
.custom_submit_button {
    background: linear-gradient(180deg, #89a5d5 0%, #89a5d5 50%, #004187 50%, #004187 100%);
    border-radius: 10px;
    position: relative;
    display: flex; /* ★維持★ Flexコンテナとして振る舞い、内部のアイテムを中央寄せ */
    justify-content: center; /* 水平中央寄せ */
    align-items: center;   /* 垂直中央寄せ */
    padding: 10px 40px; /* 上下10px, 左右40px */
    line-height: 1.8;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    border-bottom: 5px solid #A7A7A7;
    transition: 0.3s ease-in-out;
    font-size: 36px;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    gap: 1rem;
    /* ★修正点★ widthをautoにしてコンテンツに合わせ、max-widthで上限を設定 */
    width: auto; /* コンテンツの幅に合わせて自動調整 */
    max-width: 550px; /* 例として最大幅を設定。必要に応じて調整してください */
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
}

/* アイコン用の<span>要素のスタイル */
.custom_submit_button .button_icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* アイコンのz-indexはテキストと同じか下で良い（透明なinputがないため） */
    z-index: 1; 
    /* left/rightのabsolute配置は不要になる */
}

/* 各アイコンの背景画像 */
.custom_submit_button .left_icon {
    background-image: url(../img/home/form_ico01.svg);
}

.custom_submit_button .right_icon {
    background-image: url(../img/home/form_ico02.svg);
}


@media all and (max-width: 575px) {
    .custom_submit_button {
        font-size: 28px;
        padding: 8px 25px; /* レスポンシブ時も左右のパディングを調整 */
        max-width: 300px; /* レスポンシブ時の最大幅 (例: 300pxなど) */
    }
    .custom_submit_button .button_icon {
        width: 40px;
        height: 40px;
    }
    .custom_submit_button {
        gap: 0.5rem;
    }
}

/* ホバー効果 */
.custom_submit_button:hover {
    background: linear-gradient(180deg, #004187 0%, #004187 50%, #89a5d5 50%, #89a5d5 100%);
    color: #FFF;
    border-bottom: solid 2px #999;
    transform: translateY(3px);
}

/* 実績
------------------------------------------------------------*/
.achieve_area {
    background-color: #E2E2E2;
    padding: 5%;
}
@media all and (max-width: 575px) {
.achieve_area {
    padding-right: 0px;
    padding-left: 0px;
}
}
.achieve_box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    column-gap: 20px;
    row-gap: 20px;
}
@media all and (max-width: 991px) {
.achieve_box {
    grid-template-columns: repeat(2, 1fr);
    
}
}
@media all and (max-width: 575px) {
.achieve_box {
    column-gap: 10px;
    row-gap: 10px;
    
}
}
.achieve_item {
    background-color: #FFFFFF;
    text-align: center;
	padding: 20px;
}
@media all and (max-width: 575px) {
.achieve_item {
    padding: 10px;    
}
}
.achieve_ttl {
  font-size: 27px;  
}
@media all and (max-width: 575px) {
.achieve_ttl {
    font-size: 20px;
    font-weight: bold;    
}
}
.achieve_answer {
  font-size: 60px;
	color: #004187;  
}
.achieve_answer span {
  font-size: 38px;  
}
@media all and (max-width: 575px) {
.achieve_answer {
  font-size: 40px;
	color: #004187;  
}
.achieve_answer span {
  font-size: 18px;  
}
}
.achieve_time {
  font-size: 14px;  
}
@media all and (max-width: 575px) {
.achieve_time {
    font-size: 12px;
}
}
/* 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: 15px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #E95504;
    color: #fff;
    margin-right: 15px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
}
.news_type2 {
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: rgb(142, 143, 195);
    color: #fff;
    margin-right: 15px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
}
.news_tx {
  font-size: 16px;
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block;
}
.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;
}
}
/* サービス
------------------------------------------------------------*/
.service_area {
    /*background-color: #E2E2E2;*/
    padding: 5%;
}
@media all and (max-width: 575px) {
.service_area {
    padding-right: 10px;
    padding-left: 10px;
}
}
.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: 2px solid #004187;
	transition: 1s
}
@media all and (max-width: 575px) {
.service_item {
    padding: 10px;    
}
}
.service_item:hover {
    background-color: rgba(0,65,135,0.2);    
}

.service_ttl {
    font-size: 27px;
    margin-bottom: 15px;  
}
@media all and (max-width: 575px) {
.service_ttl {
    font-size: 20px;
    font-weight: bold;    
}
}
.top_service_button {
    background: #004187;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    max-width: 200px;
    padding: 5px 20px;
    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: #004187;
  color: #FFF;
}
.top_service_button:hover:after {
  right: 1.4rem;
}

/* 査定
------------------------------------------------------------*/
.satei_area {
    /*background-color: #E2E2E2;*/
    padding-top: 2%;
	margin-bottom: 5%;
}

/* お客様の声
------------------------------------------------------------*/
.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: 40px;  
	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;
}
/* コラム
------------------------------------------------------------*/
.column_area {
    background-color: #E2E2E2;
    padding: 5%;
}
@media all and (max-width: 575px) {
.column_area {
    padding-right: 10px;
    padding-left: 10px;
}
}
.column_box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    column-gap: 20px;
    row-gap: 20px;
    margin-bottom: 5%;
	margin-top: 5%;
}
@media (max-width: 1199px)  {
.column_box {
    grid-template-columns: repeat(3, 1fr);
    
}
}
@media (max-width: 767px)  {
.column_box {
    grid-template-columns: repeat(2, 1fr);
    
}
}
@media all and (max-width: 575px) {
.column_box {
    column-gap: 10px;
    row-gap: 10px;
    
}
}
.column_item {
    background-color: #FFFFFF;    
	padding: 20px;
}
@media all and (max-width: 575px) {
.column_item {
    padding: 10px;    
}
}
.column_ttl {
    font-size: 20px;
    font-weight: bold;  
	margin-top: 10px;
	margin-bottom: 5px;
	line-height: 1.2;
}

.column_tx {
  font-size: 14px; 
	display: -webkit-box;             
  -webkit-box-orient: vertical;      /* 垂直方向に配置 */
  overflow: hidden;                  /* 溢れた部分を隠す */
  text-overflow: ellipsis;           /* 溢れた部分に「...」を表示 */
  -webkit-line-clamp: 3;
}
@media all and (max-width: 575px) {
.column_tx {
    line-height: 1.2;
}
}
/* トリミング
---------------------------------*/
.trimming {
  overflow: hidden;
  position: relative;
  padding-top: 65%;
  margin-bottom: 15px;
}
.photo {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* 査定ボタン
------------------------------------------------------------*/
.satei_button_area {
    /*background-color: #E2E2E2;*/
    padding: 5%;
}
.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: #004187;
    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: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.satei_button a:hover {
  background: #333;
  color: #FFF;
}
.satei_button a:hover:after {
  right: 1.4rem;
}