@charset "UTF-8";
/* =====
 * / Garden rose ローズガーデン レイアウト
============================================================================= */
.garden-page-title > .adjust-width h1 {
  max-width: 850px;
  margin: 70px auto 60px;
  background-image: url(../images/garden/rose/page-title-left.png), url(../images/garden/rose/page-title-right.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 30px center, calc(100% - 30px) center;
}

.garden-concept-image {
  margin-top: 50px;
  padding: 55px 0 60px;
  background: url(../images/garden/rose/bg-illust-concept.png) no-repeat center top;
  background-size: cover;
}

.garden-concept-image > .adjust-width {
  position: relative;
  height: 60vw;
}

.garden-concept-image .illust-block img {
  position: absolute;
  z-index: 0;
}

.garden-concept-image .illust-block img.illust1 {
  top: -4vw;
  right: 9vw;
}

.garden-concept-image .illust-block img.illust2 {
  right: 14vw;
  bottom: 5vw;
}

.garden-concept-image .illust-block img.illust3 {
  right: 22vw;
  bottom: 0;
}

.garden-concept-image .illust-block img.illust4 {
  right: -3vw;
  bottom: -6vw;
}

.garden-concept-image .illust-block img.illust5 {
  bottom: -12vw;
  left: -9vw;
}

.garden-concept-image .image-block img {
  position: absolute;
  z-index: 2;
}

.garden-concept-image .image-block img.image1 {
  top: 0;
  left: 0;
}

.garden-concept-image .image-block img.image2 {
  top: 21.96vw;
  right: 0;
}

.garden-concept-image .image-block img.image3 {
  top: 22.25vw;
  left: 5.85vw;
}

.garden-concept-image .image-block img.image4 {
  bottom: -3.81vw;
  left: 16.57vw;
  z-index: 1;
}

/* chromeハック */
_:lang(x)::-internal-media-controls-overlay-cast-button,
.garden-all-map .image-block img {
  image-rendering: -webkit-optimize-contrast;
}

/* .garden-concept-imageのアニメーション設定 */
.garden-concept-image .illust-block img.people-illust.js-wp {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition: opacity 1s ease-out;
}

.garden-concept-image .illust-block img.people-illust.js-wp.-js-wp-animate {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.garden-concept-image .image-block img.js-wp {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.garden-concept-image .image-block img.js-wp.-js-wp-animate {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  transform: translateY(0);
}

.garden-all-map {
  margin: 100px 0 60px;
  text-align: center;
}

.garden-all-map > .adjust-width {
  position: relative;
}

.garden-all-map .illust-layout {
  display: block;
}

.garden-all-map .illust-layout img {
  position: absolute;
  z-index: -1;
}

.garden-all-map .illust-layout img.bird {
  top: 7vw;
  left: -12vw;
}

.garden-all-map .image-block {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.garden-all-map .image-block svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  transform-origin: top left;
}

.garden-all-map .image-block svg polygon,
.garden-all-map .image-block svg path,
.garden-all-map .image-block svg polyline,
.garden-all-map .image-block svg rect {
  fill: #000;
  stroke: transparent;
  stroke-miterlimit: 10;
  transition: opacity 0.3s linear 0s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.garden-all-map .image-block svg a:hover {
  transition: none;
}

.garden-all-map .image-block svg a:hover polygon,
.garden-all-map .image-block svg a:hover path,
.garden-all-map .image-block svg a:hover polyline,
.garden-all-map .image-block svg a:hover rect {
  opacity: 0.65;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
}

/* .garden-all-map（MAP）のアニメーション設定 */
.garden-all-map.js-wp .image-block {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.garden-all-map.js-wp.-js-wp-animate .image-block {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  transform: translateY(0);
}

.section-container.-besttime.-underlayer .illust-layout {
  display: block;
}

.section-container.-besttime.-underlayer .illust-layout img {
  position: absolute;
}

.section-container.-besttime.-underlayer .illust-layout img.turf01 {
  top: -70px;
  right: -15.5vw;
}

.section-container.-besttime.-underlayer .illust-layout img.tree-left {
  bottom: 10px;
  left: -19vw;
}

/* 各エリアの調整 */
.section-container.-terrace {
  padding-bottom: 0;
}

.section-container.-area .area-content > .adjust-width .area-content-flower .flower-title-note {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #F05A5E;
  font-family: '游ゴシック', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  margin: 0;
}

/* -----
 * responsive
----------------------------------------------------------------------------- */
@media screen and (min-width: 1920px) {
  /* --------------------------------------------------------------------------
    * コンセプト
  -------------------------------------------------------------------------- */
  .garden-concept-image .image-block img.image1 {
    top: -2vw;
    left: -5vw;
  }
  .garden-concept-image .image-block img.image2 {
    top: 9vw;
    right: -8vw;
  }
  .garden-concept-image .image-block img.image3 {
    top: 18vw;
    left: 1vw;
  }
  .garden-concept-image .image-block img.image4 {
    bottom: 15vw;
    left: 16vw;
    z-index: 1;
  }
}

@media screen and (min-width: 1400px) {
  /* --------------------------------------------------------------------------
    * コンセプト
  -------------------------------------------------------------------------- */
  .garden-concept-image {
    background: url(../images/garden/rose/bg-illust-concept-2x.png) no-repeat center top;
    background-size: cover;
  }
  .garden-concept-image .illust-block img.illust2 {
    right: 8vw;
  }
  .garden-concept-image .illust-block img.illust3 {
    right: 15vw;
  }
}

@media screen and (max-width: 1279px) {
  /* --------------------------------------------------------------------------
    * コンセプト
  -------------------------------------------------------------------------- */
  .garden-concept-image .illust-block img.illust1 {
    top: -5%;
    right: 22%;
  }
  .garden-concept-image .illust-block img.illust2 {
    right: 17%;
    bottom: -20%;
  }
  .garden-concept-image .illust-block img.illust3 {
    display: none;
  }
  .garden-concept-image .illust-block img.illust4 {
    display: none;
  }
  .garden-concept-image .illust-block img.illust5 {
    bottom: -25%;
    left: -5%;
  }
  .garden-concept-image .image-block img {
    max-width: 300px;
  }
  .garden-concept-image .image-block img.image2 {
    right: 10%;
  }
  .garden-concept-image .image-block img.image3 {
    top: 34%;
    left: 6%;
  }
  .garden-concept-image .image-block img.image4 {
    left: 30%;
    bottom: -10%;
  }
  /* --------------------------------------------------------------------------
    * マップ
  -------------------------------------------------------------------------- */
  .garden-all-map .illust-layout {
    display: none;
  }
  /* --------------------------------------------------------------------------
    * 見頃みどころ
  -------------------------------------------------------------------------- */
  .section-container.-besttime.-underlayer .illust-layout {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  /* tablet */
  /* --------------------------------------------------------------------------
    * コンセプト
  -------------------------------------------------------------------------- */
  .garden-concept-image {
    padding-bottom: 13vw;
    background: url(../images/garden/rose/bg-illust-concept-sp.png) no-repeat center top;
  }
  .garden-concept-image > .adjust-width {
    height: 85vw;
  }
  .garden-concept-image .illust-block img.illust1 {
    top: -5%;
    left: 42%;
  }
  .garden-concept-image .illust-block img.illust2 {
    bottom: 5%;
  }
  .garden-concept-image .illust-block img.illust5 {
    display: none;
  }
  .garden-concept-image .image-block img.image1 {
    top: -2%;
  }
  .garden-concept-image .image-block img.image2 {
    top: 11.96vw;
  }
  .garden-concept-image .image-block img.image3 {
    top: 32%;
  }
  .garden-concept-image .image-block img.image4 {
    bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  .garden-page-title > .adjust-width h1 {
    max-width: 100%;
    margin: 40px auto 45px;
    background-image: url(../images/garden/rose/page-title-left-sp.png), url(../images/garden/rose/page-title-right-sp.png);
    background-position: left center, right center;
    background-size: 70px, 70px;
  }
  .garden-concept-image {
    margin-top: 80px;
    padding: 0;
    background: url(../images/garden/rose/bg-illust-concept-sp.png) no-repeat 39% top;
    background-size: cover;
  }
  .garden-concept-image > .adjust-width {
    height: calc(800vw / 375 * 100);
    padding: 0;
  }
  .garden-concept-image .illust-block img.illust1 {
    max-width: calc(58vw / 375 * 100);
    top: calc(80vw / 375 * 100);
    left: calc(277vw / 375 * 100);
  }
  .garden-concept-image .illust-block img.illust2 {
    max-width: calc(34vw / 375 * 100);
    right: calc(40vw / 375 * 100);
    bottom: calc(-30vw / 375 * 100);
  }
  .garden-concept-image .illust-block img.illust5 {
    display: block;
    max-width: calc(86vw / 375 * 100);
    bottom: calc(-130vw / 375 * 100);
    left: 15%;
  }
  .garden-concept-image .illust-block img.illust-tree-left {
    max-width: calc(113vw / 375 * 100);
    bottom: calc(-40vw / 375 * 100);
    left: calc(-40vw / 375 * 100);
  }
  .garden-concept-image .illust-block img.illust-tree-right {
    max-width: calc(104vw / 375 * 100);
    right: 0;
    bottom: calc(210vw / 375 * 100);
  }
  .garden-concept-image .image-block img {
    max-width: calc(220vw / 375 * 100);
  }
  .garden-concept-image .image-block img.image1 {
    top: calc(60vw / 375 * 100);
    left: 0;
  }
  .garden-concept-image .image-block img.image2 {
    top: calc(230vw / 375 * 100);
    right: 0;
  }
  .garden-concept-image .image-block img.image3 {
    max-width: calc(190vw / 375 * 100);
    top: calc(410vw / 375 * 100);
    left: calc(25vw / 375 * 100);
  }
  .garden-concept-image .image-block img.image4 {
    max-width: calc(177vw / 375 * 100);
    bottom: calc(5vw / 375 * 100);
    left: calc(88vw / 375 * 100);
  }
  .garden-all-map {
    margin: calc(200vw / 375 * 100) 0 60px;
    padding: 0 22px;
  }
  /* 各エリアタイトル、イラスト等調整 */
  .section-container.-old-white .area-title-image .illust img {
    right: calc(15vw / 375 * 100);
    bottom: calc(-40vw / 375 * 100);
    max-width: calc(86vw / 375 * 100);
  }
  .section-container.-border-garden .area-title-image .illust img {
    right: calc(15vw / 375 * 100);
    max-width: calc(67vw / 375 * 100);
  }
  .section-container.-rose-gallery .area-title-image .illust img {
    right: calc(15vw / 375 * 100);
    bottom: calc(-60vw / 375 * 100);
    max-width: calc(58vw / 375 * 100);
  }
  .section-container.-grass .area-title-image .illust img {
    right: calc(15vw / 375 * 100);
    max-width: calc(65vw / 375 * 100);
  }
  .section-container.-terrace .area-title-image .illust img {
    right: calc(15vw / 375 * 100);
    max-width: calc(67vw / 375 * 100);
  }
  .section-container.-trial .area-title-image .illust img {
    right: calc(15vw / 375 * 100);
    max-width: calc(109vw / 375 * 100);
  }
  .section-container.-area .area-content > .adjust-width .area-content-flower .flower-title-note  {
    position: relative;
    top: -30px;
  }
}