@charset "utf-8";

/*==================================================
  CLEARFIX
  FONT
  TEXT FORMATTING
  BACKGROUND
  LAYOUTS
  BUTTONS
  LINK
  ICON
  PC/SP
==================================================*/

/*==================================================
  CLEARFIX
==================================================*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.clearfix:before {
  content: "";
  display: block;
  clear: both;
}

.clearfix {
  display: block;
}

/* clearboth */
.cr {
  height: 0;
  margin: 0;
  padding: 0;
  font-size: 1px;
  line-height: 1px;
  display: block;
  clear: both;
}


/*==================================================
  FONT
==================================================*/
/*font-family*/
.font_num {
  line-height: 100%;
  font-weight: bold;
  font-family: var(--font-en);
}

.font_en {
  font-family: var(--font-en);
}

.font_en-cur {
  font-family: var(--font-en-cur);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*font-size,style*/
.font_xxsmall {
  font-size: var(--font-xxsmall);
}

.font_xsmall {
  font-size: var(--font-xsmall);
}

.font_small {
  font-size: var(--font-small);
}

.font_sub {
  font-size: var(--font-sub);
}

.font_normal {
  font-size: var(--font-normal);
}

.font_medium {
  font-size: var(--font-medium);
}

.font_large {
  font-size: var(--font-large);
}

.font_xlarge {
  font-size: var(--font-xlarge);
}

.font-xxlarge {
  font-size: var(--font-xxlarge);
}

.font_cr {
  font-weight: normal;
}

.font_b {
  font-weight: bold;
}

/*font-color*/
.font_red {
  color: var(--color-red) !important;
}

.font_red01 {
  color: var(--color-red) !important;
}

.font_maincolor {
  color: var(--color-main) !important;
}

.font_blue {
  color: var(--color-blue) !important;
}

.font_blue02 {
  color: var(--color-lightblue) !important;
}

.font_yellow {
  color: var(--color-yellow) !important;
}

.font_white {
  color: #FFF !important;
}

/*marker*/
.marker_yellow {
  background: linear-gradient(transparent 65%, var(--color-yellow) 65%);
}

.marker_paleyellow {
  background: linear-gradient(transparent 65%, #FFE280 65%);
}


/*==================================================
  TEXT FORMATTING
==================================================*/
.text_c {
  text-align: center !important;
}

.text_cm {
  text-align: center !important;
  vertical-align: middle !important;
}

.text_r {
  text-align: right !important;
}

.text_l {
  text-align: left !important;
}

.text_top {
  vertical-align: top !important;
}

.text_mid {
  vertical-align: middle !important;
}

.text_btm {
  vertical-align: bottom !important;
}

/* text_blは応急処置のみで使用。不要になった場合、削除 */
.text_bl {
  vertical-align: baseline !important;
}


/*==================================================
  BACKGROUND
==================================================*/
.bg_white {
  background: #FFF;
}

.bg_yellow {
  background: var(--color-yellow);
}

.bg_red01 {
  background: var(--color-paleorange);
}

.bg_gray01 {
  background: var(--color-palegray);
}

.bg_page01 {
  border: 1px solid var(--color-lightgray);
  border-top: none;
  background: #FFF;
}


/*==================================================
  LAYOUTS
==================================================*/
.centering {
  margin-right: auto;
  margin-left: auto;
}

.flt_r {
  float: right;
}

.flt_l {
  float: left;
}

.txt_hidden {
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  display: block;
}

.inline_block {
  display: inline-block;
}

/*************** images ****************/
.object_fit_img {
  object-fit: cover;
}

.imgWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.imgWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgWrap img.contain {
  object-fit: contain;
}

@media (any-hover:hover) {
  .imgHover {
    position: relative;
    overflow: hidden;
  }

  .imgHover img {
    transition: transform .6s ease;
  }

  .imgHover:hover img {
    transform: scale(1.2);
  }
}


/*==================================================
  BUTTONS
==================================================*/

/*************** inputボタンWrapper ****************/
.btnSend,
.btnSend_float {
  display: flex;
  justify-content: center;
  align-items: center;  
  gap: var(--gutter-narrow);
  margin: var(--gutter-medium) auto;
}

.btnSend {
  max-width: 400px;
  width: 100%;
  transition: all .3s ease;
}

.btnSend_float > .btnSend {
  margin-top: 0;
  margin-bottom: 0;
}

.btnSend_float {
  flex-direction: row-reverse;
}

.btn_formWrap,.btn_formWrap--back {
  position: relative;
  height: 4em;
  font-size: var(--font-normal);
  margin-right: auto;
  margin-left: auto;
}

.btn_formWrap {
  width: clamp(40%, 400px, 100%);
}

.btn_formWrap--back {
  width: clamp(30%, 200px, 80%);
}

@media only screen and (max-width: 767px) {
  .btnSend_float {
    flex-direction: column;
  }

  .btn_logout {
    padding: 1.2em;
  }
}

/*************** inputボタン共通 ****************/
.btn_form {
  display: inline-block;
  padding: 1em 0;
  width: 100%;
  text-align: center;
}

.btn_form:hover {
  opacity: 1;
}

/*************** ベタ塗ボタン(メインカラー) ****************/
.btn_type01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--color-main);
  border-radius: var(--rad-full);
  color: #FFF;
  transition: .3s;
}

.btn_type01:hover {
  opacity: 1;
  background: var(--color-green);
}


/*************** ベタ塗ボタン(青) ****************/
.btn_type01.alt {
  background: var(--color-lightblue);
  color: #FFF;
}

.btn_type01.alt:hover {
  opacity: 1;
  background: var(--color-blue);
}

/*************** ベタ塗ボタン02(グレー／戻る) ****************/
.btn_type02 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--color-darkgray);
  border-radius: var(--rad-full);
  min-width: 24%;
  color: #FFF;
}

.btn_type02 {
  opacity: 1;
  background: var(--color-black);
}

/*************** 枠線ボタン01(黒枠) ****************/
.btn_type03 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #FFF;
  border-radius: var(--rad-full);
  border: solid 2px var(--color-black);
  min-width: 24%;
}

.btn_type03:hover {
  opacity: 1;
  background: var(--color-black);
  color: #FFF;
}

/*************** 枠線ボタン02(メイン色枠) ****************/
.btn_type04 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #FFF;
  border-radius: var(--rad-full);
  border: solid 2px var(--color-main);
  color: var(--color-main);
  min-width: 24%;
}

.btn_type04:hover {
  opacity: 1;
  background: var(--color-main);
  color: #FFF;
}

/*************** 登録ボタン01（赤／会員登録） ****************/
.btn_regist01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--color-red);
  border-radius: var(--rad-full);
  color: #FFF;
}

.btn_regist01:hover {
  opacity: 1;
  background: #FF0000;
}

/*************** トップへ戻るボタン ****************/
.btn_returntop {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 400px;
  height: 56px;
  background: var(--color-darkgray);
  color: #FFF;
  border-radius: var(--rad-full);
}

.btn_returntop:hover {
  opacity: 1;
  background: var(--color-black);
}


/*==================================================
  LINK
==================================================*/
.link-slot {
  overflow: hidden;
  color: transparent;
  text-shadow: 0 -1.5em 0 var(--color-black), 0 0 0 var(--color-black);
  transition: text-shadow 0.3s;
}

.link-slot:hover {
  opacity: 1;
  text-shadow: 0 0 0 var(--color-black), 0 1.5em 0 var(--color-black);
}

.link-slot-wh {
  overflow: hidden;
  color: transparent;
  text-shadow: 0 -1.5em 0 #FFF, 0 0 0 #FFF;
  transition: text-shadow 0.3s;
}

.link-slot-wh:hover {
  opacity: 1;
  text-shadow: 0 0 0 #FFF, 0 1.5em 0 #FFF;
}

.link-underline {
  text-decoration: underline;
}

.link-underline:hover {
  text-decoration: none;
  opacity: 1;
}

.btn_type01:has(.link-slot-wh),
.btn_regist01:has(.link-slot-wh) {
  position: relative;
}

.btn_type01 > .link-slot-wh:after,
.btn_regist01 > .link-slot-wh:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


/*==================================================
  ICON
==================================================*/
.icon_img {
  display: inline-block;
  margin-right: 5px;
  line-height: 1;
}

.icon_txt {
  display: inline-block;
  border: 1px solid var(--color-main);
  background: var(--color-main);
  color: #FFF;
  line-height: 1;
  padding: 0.5em 0.75em;
  margin-right: 0.5em;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  position: relative;
  vertical-align: middle;
}

.icon_txt a::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/*NEW*/
.icon_txt.icon_new {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-black);
  font-family: var(--font-en);
}

/*予約可*/
.icon_txt.icon_reservable {
  background: var(--color-red);
  border-color: var(--color-red);
}

/*終了*/
.icon_txt.icon_end {
  background: var(--color-gray);
  border-color: var(--color-gray);
  text-align: justify;
  text-align-last: justify;
  min-width: 50px;
}

/*人気*/
.icon_txt.icon_popular {
  background: var(--color-red);
  border-color: var(--color-red);
  text-align: justify;
  text-align-last: justify;
  min-width: 50px;
}

/*カテゴリー*/
.icon_txt.icon_cat {
  background: var(--color-main);
  border-color: var(--color-main);
  color: #FFF;
}

.icon_txt.icon_cat02 {
  border: solid 1px var(--color-black);
  color: var(--color-black);
  background: #FFF;
}

/*物件用*/
.icon_txt.icon_shop {
  background: var(--color-orange);
  border-color: var(--color-orange);
}

.icon_txt.icon_member {
  background: var(--color-red);
  border-color: var(--color-red);
}

.icon_txt.icon_general {
  background: var(--color-main);
  border-color: var(--color-main);
}

.icon_txt.icon_kodate01,
.icon_txt.icon_kodate02 {
  background: var(--color-main);
  border-color: var(--color-main);
}

.icon_txt.icon_land01 {
  background: var(--color-main);
  border-color: var(--color-main);
}

.icon_txt.icon_mansion01,
.icon_txt.icon_mansion02 {
  background: var(--color-main);
  border-color: var(--color-main);
}

.icon_txt.icon_etc01 {
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.icon_txt.icon_estate01 {
  background: var(--color-main);
  border-color: var(--color-main);
  color: #fff;
}

.icon_txt.icon_estate02 {
  background: var(--color-gray);
  border-color: var(--color-gray);
}

.icon_txt.icon_estate03 {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  font-weight: bold;
  color: var(--color-black);
}

.icon_txt.icon_estate04 {
  background: var(--color-darkgray);
  border-color: var(--color-darkgray);
}


/*==================================================
  WIDTH & HEIGHT
==================================================*/
.w100p_max {
  max-width: 100%;
}

.w96p_max {
  max-width: 96% !important;
}

.w95p_max {
  max-width: 95% !important;
}

.w90p_max {
  max-width: 90% !important;
}


/*==================================================
  PC / SP DISPLAY
==================================================*/
@media print, screen and (min-width: 768px) {
  .pc_hidden,
  .sp_only {
    display: none !important;
  }
}

@media print, screen and (min-width: 1200px) {
  .pc_wide_hidden {
    display: none !important;
  }
}

@media print, screen and (max-width: 1199px) {
  .pc_wide_only {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .sp_hidden,
  .pc_only {
    display: none !important;
  }

  .sp_block {
    display: block !important;
  }
}

@media print, screen and (min-width: 500px) {
  .sp_narrow_only {
    display: none !important;
  }
}

@media print, screen and (max-width: 499px) {
  .sp_narrow_hidden {
    display: none !important;
  }
}