@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px),print {
/* mv
-------------------------------------*/
#mv {
    padding-block: 73px 115px;
}
#mv .mv-img {
    position: relative;
    margin-bottom: 57px;
    width: min(95%, 1400px);
    margin-inline: auto;
    overflow: hidden;
}
#mv .mv-img .img img {
    width: 100%;
    height: auto;
}
#mv .ttl {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
}
#mv .en {
    position: absolute;
    bottom: -2px;
    left: 154px;
}
#mv .txt {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
}

/* sec
-------------------------------------*/
.sec {
    background: #F9F7EE;
}
.sec .inner {
    width: min(95%, 1280px);
    margin-inline: auto;
    padding-block: 135px 93px;
}
.sec .ttl {
    text-align: center;
    margin-bottom: 50px;
}
.sec .ttl img {
  max-width: 100%;
  height: auto;
}
.sec .txt {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.8125;
}
.sec .main-photo {
    margin-bottom: 60px;
}
.sec .main-photo img {
    width: 100%;
    height: auto;
}
.sec .sub-photo img {
    width: 100%;
    height: auto;
}
.sec .inBox {
    width: min(95%, 1100px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 48.09% 48.27%;
    gap: 0 40px;
    align-items: center;
}
.sec .inBox .sub-ttl {
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.7777;
    margin-bottom: 36px;
}

/* ogreen
-------------------------------------*/
#ogreen {
  background: url(../images/page-common/ogreen-bg.jpg) no-repeat center center / cover;
  padding-bottom: 82px;
}
#ogreen .ttl {
  text-align: center;
  position: relative;
  top: -24px;
  margin-bottom: 0;
}
#ogreen .ttl img {
  max-width: 100%;
  height: auto;
}
#ogreen .sub-ttl {
  font-weight: bold;
  font-size: 26px;
  letter-spacing: 0.05em;
  line-height: 1.2307;
  text-align: center;
  margin-bottom: 60px;
}
#ogreen .txt {
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.8125;
}
#ogreen .inBox {
  width: min(95%, 1100px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 48.09% 48.2727%;
  align-items: center;
  gap: 0 40px;
}
#ogreen .inBox.reverse {
  grid-template-columns: 48.2727% 48.09%;
}
#ogreen .inBox.reverse .txt {
  order: 2;
}
#ogreen .inBox.reverse .sub-photo {
  order: 1;
}
#ogreen .photo img {
  width: 100%;
  height: auto;
}

/* garden-space
-------------------------------------*/
#ogreen.garden-space .inBox.reverse {
  grid-template-columns: 48.2727% 45.45%;
  gap: 0 69px;
}
#ogreen.garden-space .ttl {
  top: -24px;
  margin-bottom: 11px;
}

/* sec02
-------------------------------------*/
#sec02 .inner {
    padding-block: 174px 94px;
}
#sec02 .inBox {
  grid-template-columns: 48.27% 48.09%;
}

/* sec03
-------------------------------------*/
#sec03 .inner {
    padding-block: 171px 95px;
}

/* sec04
-------------------------------------*/
#sec04 .inner {
    padding-block: 173px 95px;
}
#sec04 .inBox {
  grid-template-columns: 48.27% 48.09%;
}

/* sec05
-------------------------------------*/
#sec05 .inner {
    padding-block: 173px 88px;
}


/* bottom-sec
-------------------------------------*/
#bottom-sec {
  background: url(../images/raised/bottom-sec-bg.jpg) no-repeat center center / cover;
  padding-block: 160px 0;
  overflow: hidden;
}
#bottom-sec .ttl {
  text-align: center;
  margin-bottom: 64px;
}
#bottom-sec .ttl img {
  max-width: 100%;
  height: auto;
}
#bottom-sec .txt {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.93333;
  text-align: center;
  color: #fff;
  margin-bottom: 95px;
}

#bottom-sec .bg-slide {
  overflow: hidden;
  position: relative;
  top: 36px;
}
#bottom-sec .bg-slide .loop .loop__box {
  display: flex;
  width: 100vw;
}
#bottom-sec .bg-slide .loop .loop__box img {
  min-width: 157.93vw;
  height: auto;
}
#bottom-sec .bg-slide .loop .loop__box img:first-child {
  -webkit-animation: loop 50s -25s linear infinite;
  animation: loop 50s -25s linear infinite;
}
#bottom-sec .bg-slide .loop .loop__box img:last-child {
  -webkit-animation: loop2 50s linear infinite;
  animation: loop2 50s linear infinite;
}

/* bnr-box
-------------------------------------*/
#bnr-box {
  padding-block: 120px 146px;
}
#bnr-box .bnr-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 37px;
  width: min(95%, 1200px);
  margin-inline: auto;
}
#bnr-box .bnr-list li a {
  display: block;
  transition: opacity 0.3s;
}
#bnr-box .bnr-list li a:hover {
  opacity: 0.75;
}
#bnr-box .bnr-list li img {
  width: 100%;
  height: auto;
}

}

/* ========================================
  @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* mv
-------------------------------------*/
#mv {
    padding-bottom: 13.49vw;
}
#mv .mv-img {
    position: relative;
    margin-bottom: 9.56vw;
    overflow: hidden;
}
#mv .mv-img .img img {
    width: 100%;
    height: auto;
}
#mv .ttl {
    top: 14.5vw;
    width: 100%;
    margin-inline: auto;
    position: absolute;
    text-align: center;
}
#mv .en {
    position: absolute;
    bottom: -0.2vw;
    left: 4.5vw;
}
#mv .txt {
    font-weight: 500;
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 1.785714;

    width: 86.96vw;
    margin-inline: auto;
}


/* sec
-------------------------------------*/
.sec {
    background: #F9F7EE;
}
.sec .inner {
    padding-block: 11.66vw 15vw;
}
.sec .ttl {
    text-align: center;
    margin-bottom: 7.04vw;
}
.sec .txt {
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 1.785714;
}
.sec .main-photo {
    margin-bottom: 6.65vw;
}
.sec .main-photo img {
    width: 100%;
    height: auto;
}
.sec .sub-photo img {
    width: 100%;
    height: auto;
}
.sec .inBox {
    width: min(95%, 89.37vw);
    margin-inline: auto;
    display: grid;
    gap: 6.7vw 0;
}
.sec .inBox .sub-photo {
  order: 2;
}
.sec .inBox .txt-box {
  order: 1;
}
.sec .inBox .sub-ttl {
    font-weight: bold;
    font-size:4.348vw;
    letter-spacing: 0.05em;
    line-height: 1.7777;
    margin-bottom: 5.65vw;
}

/* ogreen
-------------------------------------*/
#ogreen {
  background: url(../images/page-common/ogreen-bg_sp.jpg) no-repeat center center / cover;
  padding-bottom: 9.5vw;
}
#ogreen .ttl {
  text-align: center;
  position: relative;
  top: -2.4vw;
  margin-bottom: 0.89vw;
}
#ogreen .sub-ttl {
  font-weight: bold;
  font-size:4.348vw;
  letter-spacing: 0.05em;
  line-height: 1.7777;
  text-align: center;
  margin-bottom: 8vw;
}
#ogreen .txt {
  font-size:3.382vw;
  letter-spacing: 0.05em;
  line-height: 1.785714;
}
#ogreen .inBox {
  width: min(95%, 89.37vw);
  margin-inline: auto;
  display: grid;
  gap: 6.5vw 0;
}
#ogreen .photo img {
  width: 100%;
  height: auto;
}

/* sec02
-------------------------------------*/
#sec02 .inner {
    padding-block: 21.0vw 14.5vw;
}
#sec02 .inBox .txt-box {
  order: 1;
}
#sec02 .inBox .sub-photo {
  order: 2;
}

/* sec03
-------------------------------------*/
#sec03 .inner {
    padding-block: 21.56vw 14.89vw;
}

/* sec04
-------------------------------------*/
#sec04 .inner {
    padding-block: 21.56vw 14.89vw;
}

/* sec05
-------------------------------------*/
#sec05 .inner {
    padding-block: 21.56vw 14.89vw;
}

/* bottom-sec
-------------------------------------*/
#bottom-sec {
  background: url(../images/raised/bottom-sec-bg_sp.jpg) no-repeat center center / cover;
  padding-block: 18.64vw 0;
}
#bottom-sec .ttl {
  text-align: center;
  margin-bottom: 9.95vw;
}
#bottom-sec .txt {
  font-weight: 500;
  font-size:3.623vw;
  letter-spacing: 0.05em;
  line-height: 1.86666;
  text-align: center;
  color: #fff;
  margin-bottom: 22vw;
  width: 89.37vw;
  margin-inline: auto;
}
#bottom-sec .bg-slide {
  overflow: hidden;
  position: relative;
  top: 4vw;
}
#bottom-sec .bg-slide .loop .loop__box {
  display: flex;
  width: 100vw;
}
#bottom-sec .bg-slide .loop .loop__box img {
  min-width: 340.6vw;
}
#bottom-sec .bg-slide .loop .loop__box img:first-child {
  -webkit-animation: loop 50s -25s linear infinite;
  animation: loop 50s -25s linear infinite;
}
#bottom-sec .bg-slide .loop .loop__box img:last-child {
  -webkit-animation: loop2 50s linear infinite;
  animation: loop2 50s linear infinite;
}

/* bnr-box
-------------------------------------*/
#bnr-box {
  padding-block: 19.5vw 34vw;
}
#bnr-box .bnr-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 4.83vw 0;
  width: min(95%, 91.79vw);
  margin-inline: auto;
}
#bnr-box .bnr-list li a {
  display: block;
  transition: opacity 0.3s;
}
#bnr-box .bnr-list li a:hover {
  opacity: 0.75;
}
#bnr-box .bnr-list li img {
  width: 100%;
  height: auto;
}

}