@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Main {font-family: 'Outfit', 'Noto Sans JP', sans-serif;}
#Main .block-campaign-01 {background: url("../img/bg_02.webp") no-repeat 0 0 / cover;position: relative;}
#Main .block-campaign-01 figure {max-width: 1200px;width: calc(100% - 4em);margin: 0 auto;}
#Main .block-campaign-01 .lead {margin: 1em 0 0;text-align: center;font-size: 125%;font-weight: bold;color: #fff;}
#Main .block-campaign-01 .grid-list {justify-content: space-between;margin: 1em -0.1em 0;}
#Main .block-campaign-01 .grid-list > div {flex-grow: 1;margin: 0.1em;background-color: #fff;}
#Main .block-campaign-01 .grid-list > div a {background: #fff;position: relative;padding: 1em 0 0.5em;line-height: 1.25;font-weight: bold;font-size: 125%;-webkit-font-smoothing: initial;text-align: center;color: #9f6d3b;}
#Main .block-campaign-01 .grid-list > div a span {display: block;transform: scale(0.66);font-weight: bold;}
#Main .block-campaign-01 .grid-list > div a::after {content: "";display: block;height: 1em;background: transparent url("../img/icon_01.webp") no-repeat 50% / auto 12px;filter: invert(44%) sepia(54%) saturate(491%) hue-rotate(349deg) brightness(92%) contrast(85%);}
#Main .block-campaign-01 .container {background: url("../img/bg_01.webp") no-repeat 0 0 / 100% 100%;max-width: 1000px;width: calc(100% - 4em);margin: -4em auto 0;padding: 4em 0 2em;}

#Main .block-campaign-03 {background: url("../img/bg_03.webp") no-repeat 0 0 / cover;position: relative;}
#Main .block-campaign-03 figcaption {padding: 1em 0 3em;font-size: 62.5%;line-height: 1.4;color: #fff;}
#Main .block-campaign-03 figcaption a {color: #fff;}
#Main .block-campaign-03 .container {max-width: 1000px;width: calc(100% - 4em);margin: 0 auto;padding: 2em 0;}


#Main .block-campaign-04 {background: #fbf5df url("../img/bg_04.webp") no-repeat 100% 0 / cover;padding: 2em 0 4em;}
#Main .block-campaign-04 h2 {font-size: 175%;font-weight: 600;text-align: center;letter-spacing: 0.15em;color: #294062;}
#Main .block-campaign-04 h2 strong {font-size: 175%;font-weight: normal;line-height: 1;color: #e9b00c;}
#Main .block-campaign-04 h2::after {content: "";margin: 0.25em auto 0.5em;display: block;width: 100%;height: 1px;background: linear-gradient(90deg, rgb(85 138 160 / 0%) 0%, rgb(85 138 160 / 100%) 50%, rgb(85 138 160 / 0%) 100%);}
#Main .block-campaign-04 .lead {position: relative;margin: 0;font-size: 137.5%;font-weight: 600;text-align: center;letter-spacing: 0.15em;color: #294062;}
#Main .block-campaign-04 .lead::before {content: "";display: inline-block;width: 1px;height: 1.2em;margin: 0 0.75em;background-color: #294062;vertical-align: middle;transform: rotate(-15deg) translateY(-0.2em);}
#Main .block-campaign-04 .lead::after {content: "";display: inline-block;width: 1px;height: 1.2em;margin: 0 0.75em;background-color: #294062;vertical-align: middle;transform: rotate(15deg) translateY(-0.2em);}
#Main .block-campaign-04 .container {max-width: 1000px;width: calc(100% - 4em);margin: 0 auto;}

#Main .block-campaign-05 .grid-list {justify-content: space-between;gap: 1em;}
#Main .block-campaign-05 .grid-list > div {width: calc(50% - 0.5em);}
#Main .block-campaign-05 .grid-list > div a {display: flex;flex-direction: column;justify-content: center;align-items: center;aspect-ratio: 3 / 2;border-radius: 5px;background-position: 50%;background-size: cover;color: #fff;}
#Main .block-campaign-05 .grid-list > div a h3 {text-align: center;font-size: 175%;font-weight: bold;color: #fff;}
#Main .block-campaign-05 .grid-list > div a h3 strong {font-size: 125%;}
#Main .block-campaign-05 .grid-list > div a h3 small {display: block;font-size: 50%;font-weight: bold;}
#Main .block-campaign-05 .grid-list > div a h3 span {position: relative;display: block;letter-spacing: 0.15em;font-size: 66.7%;font-weight: normal;}
#Main .block-campaign-05 .grid-list > div a h3 span::before {content: "";display: inline-block;width: 2em;height: 1px;background-color: #fff;margin: 0 0.5em 0 1em;vertical-align: middle;}
#Main .block-campaign-05 .grid-list > div a h3 span::after {content: "";display: inline-block;width: 2em;height: 1px;background-color: #fff;margin: 0 0 0 0.5em;vertical-align: middle;}
#Main .block-campaign-05 .grid-list > div a .more {position: relative;border: 1px solid #fff;margin-top: 1em;padding: 1em;width: 12em;line-height: 1;font-size: 112.5%;font-weight: bold;text-align: center;}
#Main .block-campaign-05 .grid-list > div a .more::after {content: "〉";position: absolute;top: 50%;right: 1em;transform: translateY(-50%) scaleY(0.6);}
#Main .block-campaign-05 .grid-list > div a[href="/store/"] {background-image: url("../img/bg_08.webp");}
#Main .block-campaign-05 .grid-list > div a[href="/reserve/?reservation=true"] {background-image: url("../img/bg_09.webp");}
#Main .block-campaign-05 .grid-list > div a[href="/view360/"] {background-image: url("../img/bg_10.webp");}
#Main .block-campaign-05 .grid-list > div a[href="/codate/house-selection-tips/"] {background-image: url("../img/bg_11.webp");}
#Main .block-campaign-05 .container {max-width: 1000px;width: calc(100% - 4em);margin: 3em auto;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width: 1025px) {

  #Main .block-campaign-02 .column {display: flex;justify-content: space-between;}
  #Main .block-campaign-02 .column > div {flex: 1;}

  #Main .block-campaign-04 .grid-list {margin: 0;justify-content: space-between;}
  #Main .block-campaign-04 .grid-list > div {width: calc(50% - 0.625em);margin-top: 1.25em;}
}
@media only screen and (min-width: 1025px) and (max-width: 1520px) {}
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  #Main .block-campaign-05 .grid-list > div {width: calc(100% - 0.5em);}
  #Main .block-campaign-05 .grid-list > div a {aspect-ratio: auto;height: 16em;}
}
@media only screen and (min-width: 1025px) and (max-width: 1150px) {
  #Main .block-campaign-04 .lead br {display: block!important;}
  #Main .block-campaign-04 .lead::before {position: absolute;bottom: 0.15em;right: 50%;margin-right: 10.5em;}
  #Main .block-campaign-04 .lead::after {position: absolute;bottom: 0.15em;left: 50%;margin-left: 10em;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (max-width: 1024px) {
  #GlobalHeader + nav ul li.brands,
  #GlobalHeader + nav ul li.map,
  #GlobalHeader + nav ul li.area_codate,
  #GlobalHeader + nav ul li.area_tochi {display: none;}
  #GlobalHeader + nav ul li.reserve_codate {width: calc(100% - 2px);}
  #GlobalHeader + nav ul li.reserve_codate a {height: 4.402em;padding: 0 0 0 2em;display: flex;flex-direction: column;align-items: center;justify-content: center;letter-spacing: 0.2em;font-size: 150%;}
  #GlobalHeader + nav ul li.reserve_codate a::before {background-position: 50%;background-size: auto 100%;width: 1.15em;height: 1em;margin: 0;position: absolute;top: 50%;right: calc(50% + 4.6em);}
  #GlobalHeader + nav ul li.reserve_codate a::after {display: none;}
  #GlobalHeader + nav ul li.reserve_codate a span {display: block;line-height: 2;letter-spacing: 0.05em;text-indent: -3em;font-size: 50%;}
  #GlobalHeader + nav ul li.reserve_codate a span::before {content: "";display: inline-block;width: 1px;height: 1em;background-color: #fff;margin: 0 1em;transform: skewX(15deg);}
  #GlobalHeader + nav ul li.reserve_codate a span::after {content: "";display: inline-block;width: 1px;height: 1em;background-color: #fff;margin: 0 1em;transform: skewX(-15deg);}
  #GlobalHeader + nav ul li.reserve_codate a br {display: none!important;}

  #Main .block-campaign-02 .column {display: flex;justify-content: space-between;}
  #Main .block-campaign-02 .column > div {flex: 1;}

  #Main .block-campaign-04 .grid-list {margin: 0;justify-content: space-between;}
  #Main .block-campaign-04 .grid-list > div {width: calc(50% - 0.625em);margin-top: 1.25em;}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  #Main .block-campaign-01 figure {width: 100%;margin-top: 0;}
  #Main .block-campaign-01 .lead {margin: 1em 0 0;}
  #Main .block-campaign-01 .grid-list > div {width: calc(33.33% - 1em);}
  #Main .block-campaign-01 .grid-list > div a {font-size: 100%;}

  #Main .block-campaign-02 {background-position: 0 0;background-attachment: scroll;background-size: 100% auto;}
  #Main .block-campaign-02 .column {display: block;margin-top: 2em;}
  #Main .block-campaign-02 .column > div {margin: 0;padding: 2em 1em;}


  #Main .block-campaign-04 {padding-top: 2em;}
  #Main .block-campaign-04 .grid-list > div {width: calc(100% - 0.5em);margin: 1em 0 0;}
  #Main .block-campaign-04 .lead::before,
  #Main .block-campaign-04 .lead::after {display: none;}

  #Main .block-campaign-05 .grid-list > div {width: calc(100% - 0.5em);}
  #Main .block-campaign-05 .grid-list > div a {aspect-ratio: auto;height: 18em;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}