@charset "UTF-8";
/* ===================================================================
CSS information

file name  : concept.css
author     : Abilive
style info : コンセプト
=================================================================== */
/* ===================================================================
CSS information

file name  : _settings.scss
author     : Abilive
style info : 汎用設定
=================================================================== */
@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes FadeUp {
  0% {
    transform: translateY(-200%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.25);
  }
}
.bg_concept {
  background: var(--bg-gray2);
}
@media only screen and (min-width: 1025px) {
  .bg_concept {
    padding: 6.42rem 0 6.07rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .bg_concept {
    padding: 4.28rem 0 6.07rem;
  }
}
@media only screen and (max-width: 767px) {
  .bg_concept {
    padding: 4em 0 4em;
  }
}

#main {
  padding-top: 0;
}

#footer {
  background: var(--bg-gray2);
}

@media only screen and (max-width: 1024px) {
  .con_topicpath {
    width: 100%;
    max-width: none;
    margin-top: 0;
    position: relative;
  }
  .con_topicpath::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 260%;
    z-index: -1;
    background: var(--bg-gray2);
  }
  .con_topicpath .topicpath {
    margin-right: auto;
    margin-left: auto;
  }
}
@media only screen and (max-width: 1024px) and (min-width: 1025px) {
  .con_topicpath .topicpath {
    width: calc(1160 / 1440 * 100%);
    max-width: calc(1160px);
  }
}
@media only screen and (max-width: 1024px) and (min-width: 1025px) and (min-width: 1441px) {
  .con_topicpath .topicpath {
    max-width: calc(1160px * ((16 + 3) / 14));
  }
}
@media only screen and (max-width: 1024px) and (min-width: 1025px) and (min-width: 1441px) and (max-width: 1600px) {
  .con_topicpath .topicpath {
    max-width: calc(1160px * ((16 + 2) / 14));
  }
}

@media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) {
  .con_topicpath .topicpath {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (max-width: 1024px) and (max-width: 767px) {
  .con_topicpath .topicpath {
    width: calc(355 / 375 * 100%);
  }
}

.con_intro {
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 1025px) {
  .con_intro {
    width: calc(1260 / 1440 * 100%);
    max-width: calc(1260px);
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) {
  .con_intro {
    max-width: calc(1260px * ((16 + 3) / 14));
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) and (max-width: 1600px) {
  .con_intro {
    max-width: calc(1260px * ((16 + 2) / 14));
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_intro {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_intro {
    width: calc(330 / 375 * 100%);
  }
}
@media only screen and (min-width: 768px) {
  .con_intro .txt {
    margin-top: 0.71rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_intro .txt {
    margin-top: 1em;
  }
}
@media only screen and (min-width: 768px) {
  .con_intro .txt {
    text-align: center;
  }
}
@media only screen and (min-width: 768px) {
  .con_intro .tmp_anch {
    margin-top: 3.21rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_intro .tmp_anch {
    margin-top: 3em;
  }
}

@media only screen and (min-width: 1025px) {
  .wrp_town {
    padding: 11.42rem 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .wrp_town {
    padding: 8.57rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .wrp_town {
    padding: 4em 0;
  }
}
.wrp_town .con_town {
  margin-right: auto;
  margin-left: auto;
  display: flex;
  align-items: flex-start;
}
@media only screen and (min-width: 1025px) {
  .wrp_town .con_town {
    width: calc(1260 / 1440 * 100%);
    max-width: calc(1260px);
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) {
  .wrp_town .con_town {
    max-width: calc(1260px * ((16 + 3) / 14));
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) and (max-width: 1600px) {
  .wrp_town .con_town {
    max-width: calc(1260px * ((16 + 2) / 14));
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .wrp_town .con_town {
    width: calc(1380 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .wrp_town .con_town {
    width: calc(330 / 375 * 100%);
  }
}
@media only screen and (min-width: 1025px) {
  .wrp_town .con_town {
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .wrp_town .con_town {
    flex-direction: column;
  }
  .wrp_town .con_town .js-move-sp {
    order: -1;
    width: 100%;
  }
}
.wrp_town .con_town .box_text {
  display: flex;
  align-items: center;
  flex-direction: column;
}
@media only screen and (min-width: 1025px) {
  .wrp_town .con_town .box_text {
    width: calc(322 / 1260 * 100%);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .wrp_town .con_town .box_text {
    width: calc(372 / 1260 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .wrp_town .con_town .box_text {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .wrp_town .con_town .box_text {
    padding-left: calc(40 / 1260 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .wrp_town .con_town .box_text {
    order: 2;
    margin-top: 2.5em;
  }
}
@media only screen and (min-width: 768px) {
  .wrp_town .con_town .box_text .txt {
    margin-top: 2.14rem;
  }
}
.wrp_town .con_town .box_img {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
@media only screen and (min-width: 1025px) {
  .wrp_town .con_town .box_img {
    margin-left: calc(100 / 1260 * 100%);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .wrp_town .con_town .box_img {
    margin-left: calc(50 / 1260 * 100%);
  }
}
@media only screen and (min-width: 768px) {
  .wrp_town .con_town .box_img {
    width: calc(838 / 1260 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .wrp_town .con_town .box_img {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .wrp_town .con_town .box_img {
    order: 1;
  }
}
@media only screen and (max-width: 767px) {
  .wrp_town .con_town .box_img {
    order: 1;
    margin-top: 1.5em;
  }
}
@media only screen and (min-width: 768px) {
  .wrp_town .con_town .box_img .img_main {
    width: calc(691 / 838 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .wrp_town .con_town .box_img .img_main {
    width: 85%;
  }
}
.wrp_town .con_town .box_img .img_sub {
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .wrp_town .con_town .box_img .img_sub {
    width: calc(359 / 838 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .wrp_town .con_town .box_img .img_sub {
    width: 40%;
  }
}
@media only screen and (min-width: 768px) {
  .wrp_town .con_town .box_img .img_sub {
    margin-left: calc(-212 / 838 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .wrp_town .con_town .box_img .img_sub {
    margin-left: -25%;
  }
}
@media only screen and (min-width: 768px) {
  .wrp_town .con_town .box_img .img_sub {
    margin-bottom: calc(-40 / 838 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .wrp_town .con_town .box_img .img_sub {
    margin-bottom: -5%;
  }
}

@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.con_loop {
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-start;
  z-index: 1;
}
@media only screen and (min-width: 1025px) {
  .con_loop {
    margin-top: 9.28rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_loop {
    margin-top: 7.14rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_loop {
    margin-top: 4em;
  }
}
.con_loop .box_loop {
  display: flex;
  align-items: flex-start;
  animation: scrollLeft 60s infinite linear .5s both;
}
@media only screen and (min-width: 1025px) {
  .con_loop .box_loop .item {
    width: 14.85rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_loop .box_loop .item {
    width: 11.88rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_loop .box_loop .item {
    width: 7.42rem;
  }
}
.con_loop .box_loop .item > div {
  width: calc(191 / 208 * 100%);
}
@media only screen and (min-width: 768px) {
  .con_loop .box_loop .item > div {
    position: relative;
  }
  .con_loop .box_loop .item > div img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .con_loop .box_loop .item > div::after {
    content: "";
    width: 100%;
    display: block;
  }
  .con_loop .box_loop .item > div::after {
    padding-bottom: calc(287 / 191 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_loop .box_loop .item > div {
    position: relative;
  }
  .con_loop .box_loop .item > div img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .con_loop .box_loop .item > div::after {
    content: "";
    width: 100%;
    display: block;
  }
  .con_loop .box_loop .item > div::after {
    padding-bottom: calc(287 / 191 * 100%);
  }
}

.con_town_tour {
  display: flex;
  align-items: flex-start;
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 768px) {
  .con_town_tour {
    margin-top: 7.14rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_town_tour {
    margin-top: 4em;
  }
}
@media only screen and (min-width: 1025px) {
  .con_town_tour {
    width: calc(900 / 1440 * 100%);
    max-width: calc(900px);
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) {
  .con_town_tour {
    max-width: calc(900px * ((16 + 3) / 14));
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) and (max-width: 1600px) {
  .con_town_tour {
    max-width: calc(900px * ((16 + 2) / 14));
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_town_tour {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_town_tour {
    width: calc(300 / 375 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_town_tour {
    flex-direction: column;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1365px) {
  .con_town_tour {
    width: calc(1000 / 1440 * 100%);
  }
}
@media only screen and (min-width: 768px) {
  .con_town_tour .box_town_tour {
    width: calc(430 / 900 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_town_tour .box_town_tour {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .con_town_tour .box_town_tour:nth-child(2n) {
    margin-left: calc(40 / 900 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_town_tour .box_town_tour:nth-child(n+2) {
    margin-top: 2em;
  }
}
.con_town_tour .box_town_tour .img_wrp {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .con_town_tour .box_town_tour .img_wrp {
    margin-top: 1.07rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_town_tour .box_town_tour .img_wrp {
    margin-top: 1em;
  }
}
.con_town_tour .box_town_tour .img_wrp .ic_arrow {
  position: absolute;
  z-index: 2;
  right: 1em;
  bottom: 1em;
}
.con_town_tour .box_town_tour .txt {
  margin-top: 1em;
}
@media only screen and (min-width: 768px) {
  .con_town_tour .box_town_tour .tmp_btn_base {
    margin: 1.42rem auto 0;
  }
}
@media only screen and (max-width: 767px) {
  .con_town_tour .box_town_tour .tmp_btn_base {
    margin: 1.5em auto 0;
  }
}
@media only screen and (min-width: 768px) {
  .con_town_tour .box_town_tour .tmp_btn_base {
    max-width: 21.42rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_town_tour .box_town_tour .tmp_btn_base {
    max-width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .con_town_tour .box_town_tour .tmp_btn_base .jp {
    transform: translateY(0.15em);
  }
}

.wrp_high {
  background: var(--bg-gray2);
}
@media only screen and (min-width: 1025px) {
  .wrp_high {
    padding: 11.42rem 0 9.28rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .wrp_high {
    padding: 8.57rem 0 7.14rem;
  }
}
@media only screen and (max-width: 767px) {
  .wrp_high {
    padding: 4em 0;
  }
}

.con_high_main {
  display: flex;
  align-items: flex-start;
}
@media only screen and (min-width: 768px) {
  .con_high_main {
    margin-top: 3.92rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_main {
    margin-top: 2em;
  }
}
@media only screen and (min-width: 768px) {
  .con_high_main {
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_main {
    flex-direction: column;
  }
}
@media only screen and (min-width: 768px) {
  .con_high_main .box_text {
    width: calc(395 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_high_main .box_text {
    width: calc(330 / 375 * 100%);
  }
}
@media only screen and (min-width: 768px) {
  .con_high_main .box_text .txt {
    margin-top: 1.42rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_main .box_text .txt {
    margin-top: 0.75em;
  }
}
@media only screen and (min-width: 768px) {
  .con_high_main .box_text > .inner {
    width: 85%;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_main .box_text > .inner {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_main .box_text {
    margin: 1em auto 0;
  }
}
@media only screen and (min-width: 768px) {
  .con_high_main .box_text > .inner {
    max-width: 20rem;
    margin-right: 0;
    margin-left: auto;
  }
}
.con_high_main .box_slider {
  order: -1;
}
@media only screen and (min-width: 768px) {
  .con_high_main .box_slider {
    width: calc(958 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_high_main .box_slider {
    width: 100%;
  }
}
.con_high_main .box_slider .swiper-slide .inner {
  position: relative;
}
.con_high_main .box_slider .swiper-slide .inner img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.con_high_main .box_slider .swiper-slide .inner::after {
  content: "";
  width: 100%;
  display: block;
}
.con_high_main .box_slider .swiper-slide .inner::after {
  padding-bottom: calc(650 / 908 * 100%);
}

.con_high_sub {
  margin-right: auto;
  margin-left: auto;
  display: flex;
}
@media only screen and (min-width: 1025px) {
  .con_high_sub {
    margin-top: 9.28rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_high_sub {
    margin-top: 7.14rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_sub {
    margin-top: 3.5em;
  }
}
@media only screen and (min-width: 1025px) {
  .con_high_sub {
    width: calc(1160 / 1440 * 100%);
    max-width: calc(1160px);
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) {
  .con_high_sub {
    max-width: calc(1160px * ((16 + 3) / 14));
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) and (max-width: 1600px) {
  .con_high_sub {
    max-width: calc(1160px * ((16 + 2) / 14));
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_high_sub {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_high_sub {
    width: calc(330 / 375 * 100%);
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1365px) {
  .con_high_sub {
    width: calc(1260 / 1440 * 100%);
    margin-top: 7.14rem;
  }
}
@media only screen and (min-width: 768px) {
  .con_high_sub {
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_sub {
    flex-direction: column;
  }
}
@media only screen and (min-width: 768px) {
  .con_high_sub .box_text {
    width: calc(394 / 1160 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_high_sub .box_text {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .con_high_sub .box_text .txt {
    margin-top: 1.42rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_sub .box_text .txt {
    margin-top: 0.75em;
  }
}
@media only screen and (min-width: 768px) {
  .con_high_sub .box_text > .inner {
    width: 85%;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_sub .box_text > .inner {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_sub .box_text {
    margin-top: 1em;
  }
}
@media only screen and (min-width: 768px) {
  .con_high_sub .box_text > .inner {
    max-width: 20.71rem;
  }
}
@media only screen and (min-width: 768px) {
  .con_high_sub .img {
    width: calc(766 / 1160 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_high_sub .img {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_sub .img {
    order: -1;
  }
}

.con_high_other {
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 1025px) {
  .con_high_other {
    margin-top: 7.14rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_high_other {
    margin-top: 5.71rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_other {
    margin-top: 3.5em;
  }
}
@media only screen and (min-width: 1025px) {
  .con_high_other {
    width: calc(1160 / 1440 * 100%);
    max-width: calc(1160px);
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) {
  .con_high_other {
    max-width: calc(1160px * ((16 + 3) / 14));
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) and (max-width: 1600px) {
  .con_high_other {
    max-width: calc(1160px * ((16 + 2) / 14));
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_high_other {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_high_other {
    width: calc(300 / 375 * 100%);
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1365px) {
  .con_high_other {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_high_other {
    flex-direction: column;
  }
}
.con_high_other .box_high_other {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .con_high_other .box_high_other {
    width: calc(550 / 1160 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_high_other .box_high_other {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .con_high_other .box_high_other:nth-child(2n) {
    margin-left: calc(60 / 1160 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_high_other .box_high_other:nth-child(n+2) {
    margin-top: 2.5em;
  }
}
.con_high_other .box_high_other .img {
  order: -1;
}
@media only screen and (min-width: 768px) {
  .con_high_other .box_high_other .box_text {
    margin-top: 1.78rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_other .box_high_other .box_text {
    margin-top: 1em;
  }
}
@media only screen and (min-width: 768px) {
  .con_high_other .box_high_other .box_text .txt {
    margin-top: 0.71rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_high_other .box_high_other .box_text .txt {
    margin-top: 0.5em;
  }
}

.wrp_garden {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .wrp_garden {
    padding: 10rem 0 7.14rem;
  }
}
@media only screen and (max-width: 767px) {
  .wrp_garden {
    padding: 4em 0 5em;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1365px) {
  .wrp_garden {
    padding-top: 7.14rem;
  }
}
@media only screen and (max-width: 1024px) {
  .wrp_garden {
    overflow: hidden;
  }
}
.wrp_garden::before {
  content: "";
  width: 100%;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}
@media only screen and (min-width: 1025px) {
  .wrp_garden::before {
    background-image: url(../../concept/images/bg_garden-pc.jpg);
    padding-bottom: calc(844 / 1440 * 100%);
    background-attachment: fixed;
  }
}
@media only screen and (max-width: 1024px) {
  .wrp_garden::before {
    background-image: url(../../concept/images/bg_garden-tab.jpg);
    height: 100vh;
    z-index: -1;
    position: fixed;
  }
}
@media only screen and (max-width: 767px) {
  .wrp_garden::before {
    height: 100vh;
    background-image: url(../../concept/images/bg_garden-sp.jpg);
  }
}
@media only screen and (max-width: 1024px) {
  .wrp_garden::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--bg-gray2);
    width: 100%;
    z-index: 1;
  }
}
@media only screen and (max-width: 1024px) and (min-width: 768px) {
  .wrp_garden::after {
    height: 68%;
  }
}
@media only screen and (max-width: 1024px) and (max-width: 767px) {
  .wrp_garden::after {
    height: 52%;
  }
}
@media only screen and (max-width: 1024px) and (min-width: 768px) and (max-width: 896px) {
  .wrp_garden::after {
    height: 64%;
  }
}

.con_garden_intro {
  margin-right: auto;
  margin-left: auto;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 1025px) {
  .con_garden_intro {
    width: calc(1260 / 1440 * 100%);
    max-width: calc(1260px);
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) {
  .con_garden_intro {
    max-width: calc(1260px * ((16 + 3) / 14));
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) and (max-width: 1600px) {
  .con_garden_intro {
    max-width: calc(1260px * ((16 + 2) / 14));
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_garden_intro {
    width: calc(1260 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_intro {
    width: calc(330 / 375 * 100%);
  }
}
.con_garden_intro .tmp_st_m, .con_garden_intro .txt {
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .con_garden_intro .txt {
    margin-top: 1.42rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_intro .txt {
    margin-top: 1em;
  }
}
@media only screen and (min-width: 768px) {
  .con_garden_intro .txt {
    text-align: center;
  }
}

.con_garden_main {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .con_garden_main {
    margin-top: 3.92rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_main {
    margin-top: 2em;
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_main {
    flex-direction: column;
  }
}
.con_garden_main .box_text {
  color: #fff;
}
@media only screen and (min-width: 1025px) {
  .con_garden_main .box_text {
    width: calc(354 / 1440 * 100%);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_garden_main .box_text {
    width: calc(365 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_main .box_text {
    width: calc(300 / 375 * 100%);
  }
}
@media only screen and (min-width: 1025px) {
  .con_garden_main .box_text {
    margin-top: calc(45 / 354 * 100%);
  }
}
@media only screen and (min-width: 1025px) {
  .con_garden_main .box_text {
    margin-left: calc(55 / 1440 * 100%);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_garden_main .box_text {
    margin-left: calc(65 / 1440 * 100%);
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1365px) {
  .con_garden_main .box_text {
    margin-top: calc(30 / 354 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_main .box_text {
    margin: 2em auto 0;
  }
}
@media only screen and (min-width: 1025px) {
  .con_garden_main .box_text > .inner {
    max-width: 20.71rem;
    margin-right: auto;
    margin-left: auto;
  }
}
@media only screen and (min-width: 768px) {
  .con_garden_main .box_text .txt {
    margin-top: 1.42rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_main .box_text .txt {
    margin-top: 0.75em;
  }
}
@media only screen and (min-width: 1025px) {
  .con_garden_main .box_text .sub_img {
    margin-top: calc(120 / 354 * 100%);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_garden_main .box_text .sub_img {
    margin-top: calc(50 / 354 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_main .box_text .sub_img {
    margin-top: 2em;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1259px) {
  .con_garden_main .box_text .sub_img {
    margin-top: calc(100 / 354 * 100%);
  }
}
.con_garden_main .box_slider {
  order: -1;
}
@media only screen and (min-width: 768px) {
  .con_garden_main .box_slider {
    width: calc(958 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_main .box_slider {
    width: 100%;
  }
}
.con_garden_main .box_slider .btn_arr_next svg, .con_garden_main .box_slider .btn_arr_prev svg {
  fill: #fff;
}
.con_garden_main .box_slider .swiper-slide .inner {
  position: relative;
}
.con_garden_main .box_slider .swiper-slide .inner img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.con_garden_main .box_slider .swiper-slide .inner::after {
  content: "";
  width: 100%;
  display: block;
}
.con_garden_main .box_slider .swiper-slide .inner::after {
  padding-bottom: calc(650 / 908 * 100%);
}

.con_garden_sub {
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .con_garden_sub {
    padding-top: 5.71rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_sub {
    padding-top: 4em;
  }
}
.con_garden_sub > .inner {
  margin-right: auto;
  margin-left: auto;
  display: flex;
}
@media only screen and (min-width: 1025px) {
  .con_garden_sub > .inner {
    width: calc(900 / 1440 * 100%);
    max-width: calc(900px);
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) {
  .con_garden_sub > .inner {
    max-width: calc(900px * ((16 + 3) / 14));
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1441px) and (max-width: 1600px) {
  .con_garden_sub > .inner {
    max-width: calc(900px * ((16 + 2) / 14));
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_garden_sub > .inner {
    width: calc(1160 / 1440 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_sub > .inner {
    width: calc(300 / 375 * 100%);
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1365px) {
  .con_garden_sub > .inner {
    width: calc(1100 / 1440 * 100%);
  }
}
@media only screen and (min-width: 768px) {
  .con_garden_sub > .inner {
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_sub > .inner {
    flex-direction: column;
  }
}
@media only screen and (min-width: 768px) {
  .con_garden_sub + .con_garden_sub {
    padding-top: 6.42rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_sub + .con_garden_sub {
    padding-top: 2.5em;
  }
}
@media only screen and (min-width: 1025px) {
  .con_garden_sub .box_text {
    width: calc(220 / 900 * 100%);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_garden_sub .box_text {
    width: calc(250 / 900 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_sub .box_text {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_sub .box_text {
    margin-top: 1em;
  }
}
@media only screen and (min-width: 768px) {
  .con_garden_sub .box_text .txt {
    margin-top: 1.42rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_sub .box_text .txt {
    margin-top: 0.5em;
  }
}
@media only screen and (min-width: 768px) {
  .con_garden_sub .img {
    width: calc(600 / 900 * 100%);
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_sub .img {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .con_garden_sub .img {
    order: -1;
  }
}
@media only screen and (min-width: 768px) {
  .con_garden_sub:not(.reverse) .img {
    margin-right: 0;
    margin-left: auto;
  }
}
.con_garden_sub.reverse .box_text {
  margin-right: 0;
  margin-left: auto;
}
@media only screen and (min-width: 768px) {
  .con_garden_sub.reverse .img {
    order: -1;
  }
}