@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: #fff url("../img/bg_02.webp") no-repeat 100% 0 / 100% auto;background-attachment: fixed;position: relative;padding-bottom: 1px;}
#Main .block-campaign-01 .year-mask {text-align: center;background-image: url("../img/bg_01.webp");background-size: 100% auto;background-position: 100% 0;background-attachment: fixed;color: transparent;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
#Main .block-campaign-01 .year-mask span {font-size: 2350%;font-optical-sizing: auto;font-weight: 900;padding-right: 0.45em;line-height: 1;letter-spacing: -0.025em;}
#Main .block-campaign-01 figure {max-width: 1200px;width: calc(100% - 4em);margin: -21em auto -2em;}

#Main .block-campaign-02 {background: #fbf5df url("../img/bg_03.webp") no-repeat 100% 0 / 100% auto;background-attachment: fixed;padding: 4em 0 3em;}
#Main .block-campaign-02 h2 {font-size: 175%;text-align: center;letter-spacing: 0.15em;color: #3a291f;}
#Main .block-campaign-02 h3 {text-align: center;font-weight: bold;color: #3a291f;}
#Main .block-campaign-02 h3::before {content: "";display: inline-block;width: 4em;height: 1px;margin: 0 0.5em;background-color: #3a291f;vertical-align: middle;}
#Main .block-campaign-02 h3::after {content: "";display: inline-block;width: 4em;height: 1px;margin: 0 0.5em;background-color: #3a291f;vertical-align: middle;}
#Main .block-campaign-02 figure img {margin: 1.5em 0 0.5em;}
#Main .block-campaign-02 figcaption {font-size: 62.5%;line-height: 1.4;}
#Main .block-campaign-02 .column > div {margin-top: 1.5em; padding: 2em 0;}
#Main .block-campaign-02 .column > div:nth-child(1) {background: transparent url("../img/bg_04.webp") no-repeat 0 0 / cover;}
#Main .block-campaign-02 .column > div:nth-child(2) {background: transparent url("../img/bg_05.webp") no-repeat 100% 100% / cover;}
#Main .block-campaign-02 .column h3 {color: #fbff8b;}
#Main .block-campaign-02 .column h3::before,
#Main .block-campaign-02 .column h3::after {background-color: #fff;}
#Main .block-campaign-02 .column figure img {width: calc(100% - 4em);margin: 0 auto;}
#Main .block-campaign-02 .column .caps {width: calc(100% - 4em);margin: 1.5em auto 0;display: flex;align-items: flex-start;justify-content: space-between;gap: 1em;}
#Main .block-campaign-02 .column .caps img {width: 32%;}
#Main .block-campaign-02 .column .caps p {font-size: 62.5%;line-height: 1.4;color: #fff;}
#Main .block-campaign-02 .container {max-width: 1000px;width: calc(100% - 4em);margin: 0 auto;}

#Main .block-campaign-03 {background: #fbf5df url("../img/bg_06.webp") no-repeat 100% 0 / cover;padding: 5em 0 6em;}
#Main .block-campaign-03 h2 {font-size: 175%;text-align: center;letter-spacing: 0.15em;color: #faf5ca;}
#Main .block-campaign-03 h3 {text-align: center;font-weight: bold;font-size: 125%;color: #faf5ca;}
#Main .block-campaign-03 h3::before {content: "";display: inline-block;width: 4em;height: 1px;margin: 0 0.5em;background-color: #faf5ca;vertical-align: middle;}
#Main .block-campaign-03 h3::after {content: "";display: inline-block;width: 4em;height: 1px;margin: 0 0.5em;background-color: #faf5ca;vertical-align: middle;}
#Main .block-campaign-03 h3 + p {margin-top: 2em;text-align: center;font-size: 125%;font-weight: bold;color: #fff;}
#Main .block-campaign-03 .grid-list {justify-content: space-between;margin: 1em -0.1em 0;}
#Main .block-campaign-03 .grid-list > div {flex-grow: 1;margin: 0.1em;background-color: #fff;}
#Main .block-campaign-03 .grid-list > div a {background: linear-gradient(150deg,rgba(255, 226, 0, 1) 0%, rgba(255, 197, 0, 1) 100%);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: #502c30;}
#Main .block-campaign-03 .grid-list > div a span {display: block;transform: scale(0.66);font-weight: bold;}
#Main .block-campaign-03 .grid-list > div a::after {content: "";display: block;height: 1em;background: transparent url("../img/icon_01.webp") no-repeat 50% / auto 12px;}
#Main .block-campaign-03 .container {max-width: 1000px;width: calc(100% - 4em);margin: 0 auto;}

#Main .block-campaign-04 {background: #fbf5df url("../img/bg_07.webp") no-repeat 100% 0 / cover;padding: 5em 0 0;}
#Main .block-campaign-04 h2 {font-size: 175%;font-weight: 600;text-align: center;letter-spacing: 0.15em;color: #3a291f;}
#Main .block-campaign-04 h2 strong {font-size: 175%;line-height: 1;color: #c8311c;}
#Main .block-campaign-04 h2::before {content: "";display: inline-block;width: 1px;height: 1.2em;margin: 0 0.75em;background-color: #3a291f;vertical-align: middle;transform: rotate(-15deg) translateY(-0.2em);}
#Main .block-campaign-04 h2::after {content: "";display: inline-block;width: 1px;height: 1.2em;margin: 0 0.75em;background-color: #3a291f;vertical-align: middle;transform: rotate(15deg) translateY(-0.2em);}
#Main .block-campaign-04 footer p {padding: 1em 0 3em;font-size: 137.5%;font-weight: 600;text-align: center;letter-spacing: 0.15em;color: #3a291f;}
#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-01,
  #Main .block-campaign-01 .year-mask,
  #Main .block-campaign-02 {background-size: calc(100% - 16em) auto;}

  #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;}
  #Main .block-campaign-04 .grid-list > div {width: calc(50% - 1em);}
}
@media only screen and (min-width: 1025px) and (max-width: 1520px) {
  #Main .block-campaign-01 .year-mask span {font-size: 24.736842vw;}
  #Main .block-campaign-01 figure {margin-top: -22.1vw;}
}
@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) {}
/* =====
* 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-01 .year-mask span {font-size: 32vw;}
  #Main .block-campaign-01 figure {margin-top: -28vw;}

  #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;}
  #Main .block-campaign-04 .grid-list > div {width: calc(50% - 1em);}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  #Main .block-campaign-01 {background-position: 34% 0;background-size: 175% auto;background-attachment: scroll;}
  #Main .block-campaign-01 .year-mask {background-position: 34% 0;background-size: 175% auto;background-attachment: scroll;}
  #Main .block-campaign-01 .year-mask span {font-size: 36vw;padding-right: 0;}
  #Main .block-campaign-01 figure {width: 100%;margin-top: 0;}

  #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-03 {padding: 3em 0 4em;}
  #Main .block-campaign-03 h3::before {display: none;}
  #Main .block-campaign-03 h3::after {display: block;margin: 1em auto 0;}
  #Main .block-campaign-03 h3 + p {margin: 1em 0 0;}
  #Main .block-campaign-03 .grid-list > div {width: calc(33.33% - 1em);}
  #Main .block-campaign-03 .grid-list > div a {font-size: 100%;}

  #Main .block-campaign-04 {padding-top: 2em;}
  #Main .block-campaign-04 footer p {padding-bottom: 1.5em;}
  #Main .block-campaign-04 .grid-list > div {width: calc(100% - 0.5em);}

  #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) {}