@charset "UTF-8";

/* ==========================================================================
   固定CSS
   ※ 既存環境の固定CSSは今回支給なし。支給され次第、ここに変更せず配置する
   ========================================================================== */

/* ==========================================================================
   ページ共通スタイル
   ========================================================================== */
.tc_contents {
  color: #000;
  font-family:
    "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 700;
  font-feature-settings: "palt";
  background: #fffbf6;
}
.tc_contents img {
  display: block;
}
.tc_inner {
  width: 1102px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

h2 {
  font-weight: bold;
}
/* ==========================================================================
   メインビジュアル
   ========================================================================== */
.tc_main {
  padding: 32px 38px 40px;
}
.tc_main_inner {
  position: relative;
  height: 442px;
  padding: 106px 0 0 110px;
  box-sizing: border-box;
  border-radius: 30px;
  overflow: hidden;
}
.tc_main_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc_main_title {
  position: relative;
  margin: 0;
  color: #fff;
  font-size: 43px;
  line-height: calc(60 / 43);
}
.tc_main_title span {
  display: block;
  margin-bottom: 24px;
  padding-left: 5px;
  font-size: 18px;
  line-height: 1;
}
.tc_main_title::after {
  content: "";
  display: block;
  width: 244px;
  height: 2px;
  margin-top: 37px;
  background: #fff;
}

/* ==========================================================================
   戸建て×米軍ハウス賃貸の紹介
   ========================================================================== */
.tc_intro {
  position: relative;
  padding: 98px 0 187px;
  background: #fff;
}
.tc_intro::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 94px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 94' preserveAspectRatio='none'%3E%3Cpath d='M0 94C0 94 410 0 961.7 0C1510 0 1920 94 1920 94Z' fill='%23fffbf6'/%3E%3C/svg%3E")
    no-repeat 0 0 / 100% 100%;
}
.tc_intro_inner {
  display: flex;
  align-items: flex-start;
}
.tc_intro_body {
  flex: 0 1 572px;
  padding-top: 3px;
}
.tc_intro_title {
  display: flex;
  margin: 0;
  flex-direction: column;
  align-items: flex-start;
  color: #b5a579;
  font-size: 30px;
  line-height: 1;
}
.tc_intro_label {
  height: 44px;
  margin-bottom: 25px;
  padding: 0 18px;
  border-radius: 10px;
  background: #b5a579;
  color: #fff;
  font-size: 17px;
  line-height: 44px;
}
.tc_intro_catch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.tc_intro_catch span {
  padding-bottom: 13px;
  background: linear-gradient(to right, #b5a579 8px, transparent 8px) repeat-x 0
    100% / 12px 2px;
}
.tc_intro_text {
  margin: 30px 0 0;
  font-size: 15px;
  line-height: calc(34 / 15);
}
.tc_intro_image {
  flex: 0 1 523px;
}
.tc_intro_image img {
  max-width: 100%;
  height: auto;
  border-radius: 30px;
}

/* ==========================================================================
   最近事例
   ========================================================================== */
.tc_case {
  padding: 15px 0 61px;
}
.tc_case_title {
  display: flex;
  margin: 0;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 39px;
  background:
    linear-gradient(#000, #000) no-repeat 0 100% / 100% 1px,
    linear-gradient(#000, #000) no-repeat 0 calc(100% - 5px) / 100% 2px;
  font-size: 40px;
  line-height: 1;
}
.tc_case_title span {
  margin-bottom: -6px;
  color: #c3b98e;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 27px;
  font-weight: 400;
}
.tc_case_item {
  display: flex;
  align-items: flex-start;
  margin-top: 59px;
}
.tc_case_image {
  flex: 0 1 522px;
}
.tc_case_image img {
  max-width: 100%;
  height: auto;
  border-radius: 30px;
}
.tc_case_content {
  flex: 1;
  margin-left: 46px;
  padding-top: 34px;
}
.tc_case_content h3 {
  margin: 0;
  font-size: 30px;
  line-height: calc(49 / 30);
}
.tc_case_content p {
  margin: 21px 0 0;
  font-size: 15px;
  line-height: calc(34 / 15);
}

/* ==========================================================================
   お問い合わせ
   ========================================================================== */
.tc_contact {
  padding: 46px 0 61px;
  background: #f3f0e5;
}
.tc_contact_inner {
  position: relative;
  width: 1004px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}
.tc_contact_title {
  margin: 0;
  font-size: 30px;
  line-height: 49px;
  text-align: center;
}
.tc_contact_title strong {
  color: #b50000;
}
.tc_contact_title strong span {
  font-size: 41px;
  line-height: 1;
}
.tc_contact_box {
  position: relative;
  z-index: 1;
  display: flex;
  margin-top: 24px;
  padding: 39px 0 40px;
  border-radius: 30px;
  background: #fff;
}
.tc_contact_label {
  display: flex;
  margin: 0;
  align-items: center;
  gap: 8px;
  height: 30px;
  font-size: 16px;
  line-height: 1;
}
.tc_contact_label::before,
.tc_contact_label::after {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 30px;
}
.tc_contact_label::before {
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    #c3b98e calc(50% - 1px),
    #c3b98e calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}
.tc_contact_label::after {
  background: linear-gradient(
    to top left,
    transparent calc(50% - 1px),
    #c3b98e calc(50% - 1px),
    #c3b98e calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}
.tc_contact_tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 470px;
}
.tc_contact_tel a {
  display: flex;
  align-items: center;
  margin-top: 11px;
  color: #000;
  text-decoration: none;
  font-size: 44px;
  line-height: 1;
}
.tc_contact_tel img {
  margin-right: 2px;
}
.tc_contact_hours {
  display: flex;
  gap: 15px;
  margin: 18px 0 0;
  font-family:
    "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}
.tc_contact_hours dd {
  margin: 0;
}
.tc_contact_mail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  border-left: 1px solid #c3b98e;
}
.tc_contact_mail a {
  display: flex;
  align-items: center;
  width: 440px;
  height: 90px;
  margin-top: 8px;
  padding: 0 30px 0 32px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #c3b98e;
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  line-height: 1;
  position: relative;
}
.tc_contact_mail a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  right: 25px;
  top: 38px;
}
.tc_contact_mail img {
  margin-right: 41px;
}
.tc_contact_person {
  position: absolute;
  left: calc(50% + 360px);
  bottom: -60px;
}

/* ==========================================================================
   その他の事例
   ========================================================================== */
.tc_others {
  padding-top: 95px;
}
.tc_others_title {
  display: flex;
  margin: 0;
  flex-direction: column;
  align-items: center;
  font-size: 40px;
  line-height: 1;
}
.tc_others_title span {
  margin-top: 25px;
  color: #c3b98e;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 27px;
  font-weight: 400;
}
.tc_others_list {
  display: flex;
  justify-content: space-between;
  gap: 38px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}
.tc_others_list li {
  flex: 0 1 532px;
}
.tc_others_list a {
  display: flex;
  align-items: center;
  height: 158px;
  padding: 0 19px 0 20px;
  box-sizing: border-box;
  border: 2px solid #c3b98e;
  border-radius: 10px;
  background: #fff;
  color: #000;
  text-decoration: none;
}
.tc_others_list a::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M.5.5 7.5 7 .5 13.5' fill='none' stroke='%23fff'/%3E%3C/svg%3E")
      no-repeat 50% 50% / 8px 14px,
    #c3b98e;
}
.tc_others_list img {
  flex-shrink: 0;
  border-radius: 10px;
}
.tc_others_list p {
  margin: 0 0 0 23px;
  font-size: 21px;
  line-height: calc(34 / 21);
}
.tc_others_list p span {
  color: #b5a579;
}

/* ==========================================================================
   バナー
   ========================================================================== */
.tc_banner {
  padding: 35px 0 151px;
}
.tc_banner_link {
  display: flex;
  margin: 0 -1px;
  padding: 6px;
  border: 2px solid #c3b98e;
  border-radius: 12px;
  background: #fff;
  color: #fff;
  text-decoration: none;
}
.tc_banner_body {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 364px;
  margin-right: -43px;
  padding: 27px 0 22px 38px;
  box-sizing: border-box;
  border-radius: 4px 0 0 4px;
  background: #c3b98e;
  clip-path: polygon(0 0, 100% 0, calc(100% - 43px) 100%, 0 100%);
}
.tc_banner_label {
  display: block;
  width: 268px;
  padding-bottom: 20px;
  background:
    linear-gradient(#fff, #fff) no-repeat 4px calc(100% - 10px) / 126px 1px,
    linear-gradient(#fff, #fff) no-repeat 141px calc(100% - 10px) / 126px 1px,
    linear-gradient(
        to top left,
        transparent calc(50% - 0.5px),
        #fff calc(50% - 0.5px),
        #fff calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
      )
      no-repeat 136px 100% / 5px 10px;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}
.tc_banner_title {
  display: block;
  margin-top: 4px;
  font-size: 25px;
  line-height: calc(36 / 25);
}
.tc_banner_button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 238px;
  height: 46px;
  margin-top: 14px;
  border-radius: 21px;
  background: #fff;
  color: #000;
  font-size: 15px;
  line-height: 1;
}
.tc_banner_button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 8px;
  height: 12px;
  margin-top: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M.5.5 7.5 6 .5 11.5' fill='none' stroke='%23c3b98e'/%3E%3C/svg%3E")
    no-repeat 0 0 / 100% 100%;
}
.tc_banner_image {
  display: block;
  flex: 1;
  min-width: 0;
}
.tc_banner_image img {
  width: 100%;
  height: 100%;
  border-radius: 0 4px 4px 0;
  object-fit: cover;
}