@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {font-size: 200%;font-weight: normal;font-family: 'Cardo', serif;color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;transition: letter-spacing var(--easing) 2000ms;}
#Billboard h2 + p {margin-top: 1em;font-family: "Cardo", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;transition: letter-spacing var(--easing) 2000ms;}
#Billboard .container {position: relative;z-index: 2;width: calc(100% - 4em);max-width: 1260px;padding: 6em 2em 3em;margin-left: auto;margin-right: auto;box-sizing: border-box;}
#Billboard::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #9aa url("../img/common/bg_06.webp") no-repeat 0 0 / cover;background-blend-mode: color-burn;filter: contrast(.5) brightness(3.5) grayscale(0.7);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: transform;}
.staging #Billboard::after {filter: contrast(1) brightness(1) grayscale(0);transition: filter var(--easing) 2000ms;}
.transitionend #Billboard h2,
.transitionend #Billboard h2 + p {letter-spacing: 0.2em;}

#Main .block-map-01 {position: relative;background: #ded9bb url("../img/common/bg_03.webp") no-repeat 50% / cover;background-blend-mode: overlay;}
#Main .block-map-01 .container {background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);}
#Main .block-map-01 .map {background: radial-gradient(circle, rgba(0,40,90,0.01) 0%, rgba(0,40,90,0.05) 90%);}
#Main .block-map-01 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
#Main .block-map-01 .address {position: relative;font-size: 100%;text-align: center;letter-spacing: 0.2em;}
#Main .block-map-01 .address::before {content: "";position: absolute;top: 1em;left: 0;right: 0;height: 1px;background-color: #ddd;}
#Main .block-map-01 .address strong {position: relative;background-color: #f5f7f9;border: 1px solid #203b4a;border-radius: 1em;box-sizing: border-box;width: 16em;margin: 0 auto 1em;display: block;font-weight: normal;text-align: center;line-height: 2;color: #203b4a;}
#Main .block-map-01 .address a {text-decoration: underline;font-size: 87.5%;}
#Main .block-map-01 .mansion {margin-bottom: 3em;}
#Main .block-map-01 .gallery figure {background: var(--grad-03);}
#Main .block-map-01 .gallery figcaption {text-align: center;font-size: 150%;font-family: 'Cardo', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";color: #fff;}
#Main .block-map-01 .gallery figcaption em {display: block;margin: 0.5em 0;border-top: 1px solid #fff;border-bottom: 1px solid #fff;padding: 0.5em;font-size: 75%;font-style: normal;}
#Main .block-map-01 .theta {background-color: #fff;max-width: 1000px;padding: 1.3125em;margin: 0 auto;box-sizing: border-box;border-radius: 0.5em;}
#Main .block-map-02 h3 {margin-bottom: 0.5em;font-family: 'Cardo', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 175%;text-align: center;letter-spacing: 0.2em;color: #644935;}
#Main .block-map-02 h4 {font-size: 125%;font-family: 'Cardo', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";text-align: center;margin: 0 0 1em;}
#Main .block-map-02 p {font-family: 'Cardo', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 100%;text-align: center;letter-spacing: 0.2em;}
#Main .block-map-02 .grid-list {display: flex;justify-content: center;margin: 2em 0 0;}
#Main .block-map-02 .grid-list > div {width: calc(25% - 0.5em);margin: 0.25em;max-width: 10em;}
#Main .block-map-02 .grid-list + p {color: #608984;}
#Main .block-map-02 .tel {font-size: 75%;}
#Main .block-map-02 .tel a {display: block;font-size: 600%;line-height: 1;text-decoration: none;color: rgb(35,42,65);}
#Main .block-map-02 ul {display: table;margin: 0 auto;}
#Main .block-map-02 ul li {display: table-cell;width: 50%;}
#Main .block-map-02 ul li a {background-color: #ddd;height: 4em;width: 15em;position: relative;font-family: "Cardo", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;font-size: 125%;color: #fff;text-align: center;line-height: 4;}
#Main .block-map-02 h4 {color: #203b4a;}
#Main .block-map-02 ul li.request a {background: var(--grad-02);}
#Main .block-map-02 ul li.request a::after {content: "〉";line-height: 1;position: absolute;top: 50%;right: 0.5em;margin-top: -0.5em;transform: scaleY(0.5);}
#Main .block-map-02 ul li.reserve a {background: var(--grad-01);}
#Main .block-map-02 ul li.reserve a::after {content: "〉";line-height: 1;position: absolute;top: 50%;right: 0.5em;margin-top: -0.5em;transform: scaleY(0.5);}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-map-01 .gallery figure {display: flex;flex-direction: row-reverse;max-width: 54em;margin: 0 auto;padding: 5px;}
  #Main .block-map-01 .gallery figure > * {width: 50%;}
  #Main .block-map-01 .gallery figcaption {display: flex;align-items: center;justify-content: center;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard .container {width: 100%;padding: 6em 0 2em;}
  #Billboard::after {background-position: 50% calc(50% + 2em - 2px);background-size: 100% calc(100% + 4em);}

  #Main .block-map-01 .container {position: relative;}
  #Main .block-map-01 .gallery figure {padding: 3px;}
  #Main .block-map-01 .gallery figcaption {padding: 1.5em;font-size: 125%;}

  #Main .block-map-02 h3 {font-size: 137.5%;letter-spacing: 0;}
  #Main .block-map-02 p {letter-spacing: 0;}
  #Main .block-map-02 .ttl-style-01 {margin: 0 0 1em;padding-top: 0.5em;letter-spacing: 0;line-height: 1.5;}
  #Main .block-map-02 .ttl-style-01::before {position: static;display: block;width: 100%;margin: 0 0 0.5em;}
  #Main .block-map-02 .ttl-style-01::after {position: static;display: block;width: 100%;margin: 0.5em 0 0;}
  #Main .block-map-02 .tel {letter-spacing: 0;text-align: center;}
  #Main .block-map-02 .tel a {font-size: 400%;}
  #Main .block-map-02 ul {width: 100%;}
  #Main .block-map-02 ul li a {font-size: 100%;width: 100%;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}