@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap'); :root {
    --border-main: 2rem;
}
/*============================
アニメーション
============================*/
.fadeIn_up {
  transform: translate3d(0, 50px, 0);
  transition: .8s ease-in-out;
  opacity: 0;
}
.fadeIn_up.move {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.fadeIn_right {
  transform: translate3d(-50px, 0, 0);
  transition: .8s ease-in-out;
  opacity: 0;
}

.fadeIn_right.delay02{
	transition-delay: .4s;
}

.fadeIn_right.move {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.blur{
	-webkit-filter: blur(2em);
	filter: blur(2em);
	-webkit-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
	transition-delay: .4s;
	opacity: 0;
}
.blur.move{
	-webkit-filter: blur(0);
	filter: blur(0);
	opacity: 1;
}

/*============================
下層のみに変更
============================*/
@media screen and (min-width: 769px) {
    .br_sp {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .br_pc {
        display: none;
    }
}

/*============================
汎用
============================*/
.f_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.jost {
    font-family: "Jost", sans-serif;
}

.cmn_mb01 {
    margin-bottom: 8rem;
}

.cmn_border img {
    border-radius: var(--border-main);
}

/*============================
ベース
============================*/
.promo_width {
    max-width: 154rem;
}

.floor_width {
    max-width: 110rem;
    padding: 0;
}

.sec_pd {
    padding: 10rem 0;
}

.sec_pd02 {
    padding: 7.5rem 0;
}

.sec_fst_pt {
    padding-top: 8rem;
}

/*============================
プロモ
============================*/
#promo {
    min-height: 40rem;
    background: no-repeat 50% /cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 5.5rem 3rem 0;
}

#promo::after {
    position: absolute;
    content: "";
    background: no-repeat 50% / cover;
    width: 100vw;
    height: 5.625vw;
    bottom: -2.5rem;
    left: 0;
}

#promo.deco01::after {
    background-image: url(../images/common/cmn_bottom_deco.png);
}

#promo.deco02::after {
    background-image: url(../images/common/cmn_bottom_deco02.png);
}

#promo p.main_ttl {
    max-width: 73.5rem;
    margin: 9rem auto 0;
}

#promo p.max_w02 {
    max-width: 65.2rem;
}

#promo p.max_w03 {
    max-width: 72.7rem;
}

#promo p.main_ttl img {
    width: 100%;
}

/*============================
共通パーツ
============================*/
.cmn_habitat_area {
    position: relative;
    margin-bottom: 9rem;
    /* padding-right: 54rem; */
}

.cmn_habitat_area p.main_lead {
    position: relative;
    padding-bottom: 3.2rem;
    margin-bottom: 5rem;
}

.cmn_habitat_area p.main_lead::after {
    position: absolute;
    content: "";
    background: url(../images/common/cmn-floor_ttl_deco.png) no-repeat 50% / contain;
    width: 65rem;
    height: 2.8rem;
    bottom: 0;
    left: -1rem;
}

.cmn_habitat_area h2.main_ttl {
    margin-bottom: 3rem;
}

.cmn_habitat_area h2.main_ttl span {
    display: block;
}

.cmn_habitat_area h2.main_ttl span.ja {
    margin-bottom: 1.5rem;
}

.cmn_habitat_area h2.main_ttl span.en {
    color: #6699d4;
    letter-spacing: .06em;
    padding-left: 1rem;
}

.cmn_habitat_area h2.main_ttl span img {
    max-width: 100%;
}

.cmn_habitat_area p.main_txt {
    line-height: 1.75;
    padding-left: 2.5rem;
}

.cmn_habitat_area .img_area {
    position: absolute;
    top: 30%;
    right: calc(50% - 55rem);
    /* width: 50rem; */
}

.cmn_habitat_area .img_area.img_double {
    align-items: center;
    gap: 2rem;
}

.cmn_habitat_area .img_area.img_double p.img:last-child {
    margin-top: 4rem;
}

.cmn_habitat_area .img_area02 {
    position: absolute;
    top: -5rem;
    right: calc(50% - 54rem);
}

.cmn_habitat_box h2.ttl {
    font-size: 3rem;
    position: relative;
    line-height: 1;
    padding: 1rem 2.5rem 2rem;
    min-height: 8rem;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(231,246,255,1) 0%, rgba(235,255,245,1)100%);
    border-radius: 10px;
    margin-bottom: 5rem;
}

.cmn_habitat_box h2.ttl::before {
    position: absolute;
    content: "";
    background: #2ec2db;
    width: 0.6rem;
    height: 1em;
    top: calc(50% - 0.2rem);
    left: 0;
    transform: translateY(-50%);
}

.cmn_habitat_box .inner {
    justify-content: space-between;
    gap: 2rem
}

.cmn_habitat_box .inner .area_a {
    max-width: 55rem;
    width: 50%;
}

.cmn_habitat_box .inner .area_a p.txt {
    line-height: 1.75;
    margin-bottom: 8rem;
}

.cmn_habitat_box .inner .area_a ul.items {
    margin: 0 -1rem -2rem;
    max-width: 56rem;
}

.cmn_habitat_box .inner .area_a ul.items li {
    width: calc(50% - 2rem);
    margin: 0 1rem 2rem;
}

.cmn_habitat_box .inner .area_a ul.items li img {
    width: 100%;
}

.cmn_habitat_box .inner .area_b {
    max-width: 48rem;
    padding-top: 1rem;
    width: 47%;
}

.cmn_habitat_box .inner .area_b img {
    width: 100%;
}

/*============================
sp用
============================*/
@media screen and (max-width: 768px) {
    /*============================
汎用
============================*/.f_wrap {
    }

    .jost {
    }

    .cmn_mb01 {
    }

    .cmn_border img {
    }

    /*============================
ベース
============================*/
    .promo_width {
    }

    .floor_width {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .sec_pd {
    }

    .sec_pd02 {
        padding: 7rem 0;
    }

    .sec_fst_pt {
    }

    /*============================
プロモ
============================*/
    #promo {
        margin: 0;
        min-height: auto;
        height: 35rem;
    }

    #promo::after {
        width: 75rem;
        height: 3.5rem;
        bottom: -1rem;
    }

    #promo.deco01::after {
        background-image: url(../images/common/cmn_bottom_deco_sp.png);
    }

    #promo.deco02::after {
        background-image: url(../images/common/cmn_bottom_deco02_sp.png);
    }

    #promo p.main_ttl {
        margin-top: 5.5rem;
        width: 46.4rem;
    }

    #promo p.sp_w01 {
        width: 36.8rem;
    }

    #promo p.max_w02 {
        width: 38rem;
    }

    #promo p.max_w03 {
    }

    #promo p.main_ttl img {
    }

    /*============================
共通パーツ
============================*/
    .cmn_habitat_area {
    }

    .cmn_habitat_area p.main_lead {
    }

    .cmn_habitat_area p.main_lead img {
        width: 48.5rem;
    }

    .cmn_habitat_area p.main_lead::after {
    }

    .cmn_habitat_area h2.main_ttl {
    }

    .cmn_habitat_area h2.main_ttl span {
    }

    .cmn_habitat_area h2.main_ttl span.ja {
    }

    .cmn_habitat_area h2.main_ttl span.en {
        font-size: 2rem;
    }

    .cmn_habitat_area h2.main_ttl span img {
        width: 44.3rem;
    }

    .cmn_habitat_area p.main_txt {
        margin-bottom: 6rem;
    }

    .cmn_habitat_area .img_area {
        position: static;
    }

    .cmn_habitat_area .img_area.img_single p.img {
        margin: 0 auto;
    }

    .cmn_habitat_area .img_area.img_single p.img img {
        width: 30rem;
    }

    .cmn_habitat_area .img_area.img_double {
        gap: 0;
        justify-content: space-between;
    }

    .cmn_habitat_area .img_area.img_double p.img:first-child {
    }

    .cmn_habitat_area .img_area.img_double p.img:first-child img {
        width: 29rem;
    }

    .cmn_habitat_area .img_area.img_double p.img:last-child {
    }

    .cmn_habitat_area .img_area.img_double p.img:last-child img {
        width: 32.5rem;
    }

    .cmn_habitat_area .img_area02 {
        position: static;
        text-align: center;
    }

    .cmn_habitat_area .img_area02 img {
        width: 41rem;
    }

    .cmn_habitat_box h2.ttl {
        font-size: 3.6rem;
        line-height: 1.5;
        padding: 2rem 3rem;
    }

    .cmn_habitat_box h2.ttl::before {
		top: 50%;
    }

    .cmn_habitat_box h2.ttl.sp_2line::before {
        height: calc(7.2rem + (3.6rem * 0.8));
        /* 1行の文字高さ + 行間の半分 */
    }

    .cmn_habitat_box .inner {
        flex-direction: column-reverse;
    }

    .cmn_habitat_box .inner .area_a {
        width: 100%;
        max-width: none;
    }

    .cmn_habitat_box .inner .area_a p.txt {
        margin-bottom: 5rem;
    }

    .cmn_habitat_box .inner .area_a ul.items {
        max-width: none;
        justify-content: center;
    }

    .cmn_habitat_box .inner .area_a ul.items li {
    }

    .cmn_habitat_box .inner .area_a ul.items li img {
    }

    .cmn_habitat_box .inner .area_b {
        width: 100%;
        max-width: none;
        margin-bottom: 3rem;
    }

    .cmn_habitat_box .inner .area_b img {
    }

    /*============================
END
============================*/
}