.home_page .key {
    position: relative;
    height: var(--height);
    min-height: var(--min-height);
    max-height: var(--max-height);
    background-color: #f7f7f7;
}

/* .home_page .key:before {
    content: "";
    position: absolute;
    background: url("../images/idx_key_bg.png") no-repeat center/cover
} */

.home_page .key .mv_slider {
    display: flex
}

.home_page .key .key_text {
    position: relative;
    width: 100%;
    max-width: 1280px;
    z-index: 0;
}

.home_page .key .catch {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 5.2em;
    margin-right: 8em
}

.home_page .key .catch .desc,
.home_page .key .catch .title {
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.1em;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-lr;
    -webkit-text-orientation: upright;
    -moz-text-orientation: upright;
    -ms-text-orientation: upright;
    text-orientation: upright
}

.home_page .key .catch .title {
    color: var(--clr-green);
    font-size: 2.65em;
    height: fit-content;
    margin-bottom: 0
}

.home_page .key .catch .title>span {
    display: block;
    background-color: #fff;
    border-radius: 5px;
    padding: 0.717em 0.3396em 0.5283em 0.3019em;
    line-height: 1
}

.home_page .key .catch .title>span:not(:last-child) {
    margin-right: 0.6038em
}

.home_page .key .catch .desc {
    font-size: 1.4em;
    text-shadow: 0 0 12px rgba(67, 67, 68, 0.3), 0 0 12px rgba(67, 67, 68, 0.3), 0 0 12px rgba(67, 67, 68, 0.3), 0 0 12px rgba(67, 67, 68, 0.5);
    margin-top: 5.6429em;
    margin-right: 0.8571em;
    line-height: 1.8
}

.home_page .key .banner {
    position: relative;
    width: 33.5em;
    height: 14em;
    background-color: var(--main-color);
    border-radius: 999em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2
}

.home_page .key .banner:before {
    content: "";
    position: absolute;
    inset: 0.4em;
    border-radius: inherit;
    border: 1px solid #fff;
    z-index: -1
}

.home_page .key .banner .tt {
    color: #fff;
    font-size: 1.6em;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    margin-bottom: 0
}

.home_page .key .banner .tt .md {
    font-size: 1.125em;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.4444em
}

.home_page .key .banner .tt .num {
    font-size: 1.3333em;
    letter-spacing: 0.1em
}

.home_page .key .banner .tt .lg {
    display: block;
    font-family: var(--f-en);
    font-size: 2.625em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.1429em
}

.home_page .key .list {
    display: flex;
    gap: 0.7em;
    margin-bottom: 17.8em
}
.home_page .key .key_img{
    position: absolute;    
    width: 100%;
    height: 100%;
    top: -5em;
    left: 0px;
    right: 0px;
    margin: 0 auto;

}
.home_page .key .mv_slider{
    width: 100%;
    height: var(--height);
    min-height: var(--min-height);
    max-height: var(--max-height);
    z-index: -1;
}
.home_page .key .mv_slider .slick-list{
    width: 100%;
    height: 100%;
}
.home_page .key .mv_slider .slider{
    width: 100%;
    height: 100%;
}
.home_page .key .mv_slider:not(.slick-slider){opacity: 0;}
.home_page .key .mv_slider .item{  
    max-width: 1080px;
    width: 87%;
    aspect-ratio: 1080/1007;   
    height: var(--height);
    min-height: var(--min-height);
    max-height: var(--max-height);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 100%;
    margin: 0 auto;
}
.home_page .key .mv_slider .item.s1{background-image: url("../images/idx_key_bg.png");}
.home_page .key .mv_slider .item.s2{background-image: url("../images/idx_key_bg02.png");}
.home_page .key .mv_slider .item.s3{background-image: url("../images/idx_key_bg03.png");}
@media only screen and (min-width:769px){
    .home_page .key .banner{
        bottom: 13em;
        right: 62%;
    }
}
@media only screen and (min-width:769px) and (max-width:1024px) {
    .home_page .key .list {
        margin-bottom: 22.8em
    }
    .home_page .key .banner{
        bottom: 22em;
        right: 40%;
    }
}

.home_page .key .list .item {
    position: relative;
    font-size: 1.4em;
    width: 10em;
    height: 10em;
    border-radius: 50%;
    background-color: #fff;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.home_page .key .list .item:before {
    content: "";
    position: absolute;
    inset: 0.3571em;
    background: url("../images/key_item_bg.png") no-repeat center/cover;
    z-index: -1
}

.home_page .key .list .item>span {
    text-align: center;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: var(--main-color)
}

.home_page .topic_path {
    display: none
}

@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0)
    }

    to {
        transform: translate3d(-50%, 0, 0)
    }
}

.idx_marquee {
    position: relative;
    height: 33.5em
}

.idx_marquee .txt {
    position: absolute;
    top: -13em;
    left: calc(50% - 183.3em);
    width: 366.6em;
    aspect-ratio: 1/1;
    background: url(../images/idx_marquee_txt.png) no-repeat center/cover;
    animation: spin 300s linear infinite;
    transform-origin: center;
    z-index: 0
}

@media only screen and (min-width:769px) and (max-width:1024px) {
    .idx_marquee {
        font-size: 0.8em
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-360deg)
    }
}

@media only screen and (min-width:769px) {
    .home_page .key {
        --height: 90vw;
        --min-height: 690px;
        --max-height: 1054px;
        font-size: min(0.9vw, 10px)
    }

    /* .home_page .key:before {
        width: 87%;
        max-width: 1080px;
        aspect-ratio: 1080/1007;
        top: -5em;
        left: 0px;
        right: 0px;
        margin: 0 auto
    } */

    .home_page .key .key_text {
        margin: 0 auto;
        display: flex;
        padding-right: max(60px, 7em);
        padding-left: 3em;
        padding-top: 14.2em;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: flex-end
    }
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .home_page .key {
        --height: 83vw;
        --min-height: 490px
    }

    .home_page .key .catch {
        margin-right: 1em;
        margin-bottom: 4.2em
    }

    .home_page .key .catch .desc {
        font-size: 1.7em;
        margin-top: 1.6429em
    }

    .idx_marquee .txt {
        top: -25em
    }
}

.wrap-title01 {
    position: relative
}

.wrap-title01 .en {
    font-size: 90px;
    line-height: 0.5;
    color: #f7f7f7;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    letter-spacing: 0.05em
}

.wrap-title01 h2 {
    font-size: 34px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--main-color);
    text-align: center;
    position: relative;
    z-index: 0;
    letter-spacing: 0.1em
}

.wrap-title01 h2:before {
    content: "";
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    background: url(../images/ic-h2.svg) no-repeat center/contain;
    margin: 0 auto 41px
}

.wrap-title01 h2.fz26 {
    font-size: 26px;
    line-height: 1.7
}

.wrap-title02 {
    color: var(--main-color);
    text-align: center
}

.wrap-title02 h2 {
    font-size: 51px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em
}

.wrap-title02 .en {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    position: relative;
    padding-top: 21px;
    margin-bottom: 13px
}

.wrap-title02 .en:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    right: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    background: url(../images/ic-heart-blue.svg) no-repeat center/contain
}

.wrap-title02.cl-white {
    color: #ffffff
}

.wrap-title02.cl-white .en:before {
    background-image: url(../images/ic-heart-white.svg)
}

.wrap-title02.cl-green {
    color: var(--clr-green)
}

.wrap-title02.cl-green .en:before {
    background-image: url(../images/ic-heart-green.svg)
}

.wrap-title02.cl-pink {
    color: var(--clr-pink)
}

.wrap-title02.cl-pink .en:before {
    background-image: url(../images/ic-heart-pink.svg)
}

.wrap-title02.cl-purple {
    color: var(--clr-purple)
}

.wrap-title02.cl-purple .en:before {
    background-image: url(../images/ic-heart-purple.svg)
}

@media only screen and (min-width:769px) {
    .wrap-title02.tl-vertical {
        text-align: left;
        writing-mode: vertical-lr;
        display: flex;
        flex-direction: column-reverse
    }

    .wrap-title02.tl-vertical .en {
        margin-left: 16px;
        font-weight: 600
    }

    .wrap-title02.tl-vertical .en:before {
        top: 7px;
        left: -2px
    }
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .wrap-title01 .en {
        font-size: 70px
    }

    .wrap-title01 h2 {
        font-size: 30px
    }

    .wrap-title01 h2.fz26 {
        font-size: 22px
    }

    .wrap-title01 h2:before {
        margin-bottom: 25px
    }

    .wrap-title02 .en {
        font-size: 14px
    }

    .wrap-title02 h2 {
        font-size: 40px
    }
}

@media only screen and (min-width:769px) {
    .b-grid {
        display: grid
    }

    .b-grid .column-star1 {
        grid-row: 1/span 3
    }

    .b-grid .column-star2 {
        grid-column-start: 2;
        grid-row: 1/span 2
    }
}

.block-common {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 79px 50px 51px
}

.block-common .wrap-title02 {
    padding-left: 20px
}

.block-common .cm-row1 {
    justify-content: flex-start
}

.block-common .cm-row1:after,
.block-common .cm-row1:before {
    content: "";
    position: absolute
}

.block-common .cm-row1:before {
    bottom: 0;
    left: 0;
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: auto 2px;
    width: 55.7%;
    height: 2px
}

.block-common .cm-row1:after {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-size: 10px
}

.block-common .cm-row1 .cm-img {
    z-index: 1;
    font-size: 10px
}

.block-common .cm-row1 .cm-img .mask {
    mask-image: url(../images/idx10_mask.svg);
    -webkit-mask-image: url(../images/idx10_mask.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% auto;
    -webkit-mask-size: 100% auto;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: #ccc;
    width: 58.4em;
    height: 58.4em
}

.block-common .cm-row1 .cm-img img {
    object-fit: cover;
    width: 102%;
    height: 100%;
    position: relative;
    left: 0;
    top: 0
}

.block-common .cm-row1 .subtl {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.73;
    color: var(--main-color);
    letter-spacing: 0.1em;
    margin-bottom: 21px
}

.block-common .cm-row1 .subtl.cl-green {
    color: var(--clr-green)
}

.block-common .cm-row1 .cm-cont p:not(.subtl) {
    letter-spacing: 0.15em
}

.block-common .cm-row1 .btn-group {
    margin-top: 32px
}

.block-common .cm-row1 .btn-group .btn {
    max-width: 252px
}

.block-common .cm-bx {
    border-radius: 15px;
    position: relative;
    padding: 101px 40px 49px;
    background-color: #e9f7ff
}

.block-common .cm-bx.bg-green {
    background-color: #e9fbde
}

.block-common .cm-bx .cm-tl {
    position: absolute;
    top: 0;
    left: 40px;
    background-color: #ffffff;
    text-align: center;
    padding: 16px 30px 22px;
    border-radius: 0 0 15px 15px
}

.block-common .cm-bx .cm-tl.cl-green p {
    color: var(--clr-green)
}

.block-common .cm-bx .cm-tl:after,
.block-common .cm-bx .cm-tl:before {
    content: "";
    position: absolute;
    top: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 15px;
    height: 15px
}

.block-common .cm-bx .cm-tl:before {
    left: -15px;
    background-image: url(../images/idx06_cm_tl_bf.png)
}

.block-common .cm-bx .cm-tl:after {
    right: -15px;
    background-image: url(../images/idx06_cm_tl_at.png)
}

.block-common .cm-bx .cm-tl p {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--main-color)
}

.block-common .cm-bx .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px
}

.block-common .cm-bx .btn-group .btn {
    margin-bottom: 0
}

.block-common .cm-bx .btn-group .btn a {
    padding: 0.5625em 2.85em 0.6875em 1.25em;
    line-height: 1.25
}

.block-common .cm-bx .btn-group .btn a:not(:hover):after {
    right: 19px
}

.block-common .cm-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 15px
}

.block-common .cm-list.green .item:after {
    background-color: var(--clr-green)
}

.block-common .cm-list .item {
    background-color: #ffe370;
    padding: 1.2em 1.5em 1em;
    border-radius: 7px;
    min-height: 8em;
    position: relative;
    font-size: 10px;
    transition: 0.3s all
}

.block-common .cm-list .item:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2em;
    width: 2em;
    height: 2em;
    margin: auto;
    border-radius: 50%;
    background: var(--main-color) url(../images/btn_ic_arrow.png) no-repeat center/cover;
    transition: 0.3s all
}

.block-common .cm-list .cont {
    display: flex;
    align-items: center
}

.block-common .cm-list .cont .img {
    width: 5.5em;
    height: 5.5em;
    background-color: #fff5cd;
    border-radius: 50%
}

.block-common .cm-list .cont .title {
    width: calc(100% - 3.4375em);
    font-weight: 500;
    line-height: 1.25;
    padding-left: 0.875em;
    padding-bottom: 0.1875em;
    font-size: 1.6em
}

.block-common .cm-row3 {
    align-items: flex-start
}

.block-common .cm-row3 h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.52;
    color: var(--clr-green);
    margin-bottom: 22px
}

.block-common .cm-row3 h3 .tt-line {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    position: relative;
    z-index: 0;
    padding-left: 0.1666666667em;
    padding-right: 0.0833333333em
}

.block-common .cm-row3 h3 .tt-line:before {
    content: "";
    position: absolute;
    bottom: 0.0833333333em;
    left: 0;
    width: 100%;
    height: 0.375em;
    background-color: var(--clr2);
    border-radius: 4px;
    z-index: -1
}

.br_auto {
    display: inline-block
}

#mainContent {
    position: relative
}

.idx_news {
    margin-left: -3em;
    z-index: 1;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto
}

.idx_news .ttl {
    position: absolute;
    bottom: calc(100% - 9px);
    left: 1.6667em;
    font-family: var(--f-sulphur);
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--main-color);
    margin-bottom: 0
}

.idx_news .news {
    position: relative;
    display: flex;
    align-items: center;
    width: 55.1em;
    padding: 1.9em 3em 2.2em;
    background-color: #fff;
    border-radius: 0 7em 7em 0
}

.idx_news ul {
    width: 82%;
    max-width: 394px;
    padding-right: 3em;
    margin-right: 3em;
    border-right: 1px solid #d9d8d8
}

.idx_news ul li {
    width: auto
}

.idx_news ul li:last-child {
    border-bottom: 0
}

.idx_news ul li a {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    text-decoration: none;
    padding: 0.3125em 0 0.25em;
    font-size: 1.6em;
    font-weight: 500;
    transition: all 0.3s;
    letter-spacing: 0.1em;
    white-space: nowrap;
    max-width: 100%;
    width: 100%
}

.idx_news ul li a:after {
    content: "";
    position: absolute;
    width: round(1.25em, 1px);
    height: round(1.25em, 1px);
    top: 0.5em;
    right: 0px;
    background: url("../images/idx_news_arrow.svg") no-repeat center/cover;
    transition: all 0.3s
}

.idx_news ul li a span {
    display: inline
}

.idx_news ul li a:hover {
    opacity: 1
}

.idx_news ul li a .date {
    width: 6.5em;
    font-family: var(--f-sulphur);
    font-size: 0.8125em;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.3s;
    color: #a1a1a1
}

.idx_news ul li a .title {
    max-width: calc(100% - 6.5em);
    color: var(--clr1);
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden
}

.idx_news .btn-news {
    position: relative
}

.idx_news .btn-news a {
    position: relative;
    font-family: var(--f-sulphur);
    font-size: 2em;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--main-color);
    text-align: center;
    text-decoration: none
}

.idx_news .btn-news a:after {
    content: "";
    display: block;
    width: round(2.525em, 1px);
    aspect-ratio: 50.5/20;
    margin-top: 0.5em;
    background: url("../images/btn_news_ic.svg") no-repeat center/cover
}

@media only screen and (min-width:1281px) {
    .idx_news {
        position: relative;
        left: calc(640px - 50vw)
    }
}

@media only screen and (min-width:769px) {
    .idx_news {
        font-size: min(0.9vw, 10px);
        position: absolute;
        width: 100%;
        top: -66.4em;
        left: 0;
        right: 0
    }

    .idx_news .news {
        max-width: 55.1em
    }

    .idx_news ul li a:hover {
        opacity: 0.8
    }

    .idx_news ul li a:hover:after {
        right: -3px
    }
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .idx_news {
        top: -57.4em
    }
}

.idx01_bnr{
    display: table;
    margin: 0 auto 50px;
}
.idx01 {
    position: relative;
    z-index: 1
}

@media only screen and (min-width:769px) {
    .idx01_bnr{width: 85%;}
}
.idx01:before {
    content: "";
    position: absolute;
    width: 100vw;
    aspect-ratio: 128/12;
    top: -120px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    background: url("../images/bg_mask.svg") no-repeat top center/cover;
    z-index: -1
}

.idx01 .inner_big {
    max-width: 1160px
}

.idx01 .idx_box {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    z-index: 0;
    padding: 70px 0
}

.idx01 .idx_box:after {
    content: "";
    position: absolute;
    width: 1080px;
    height: 100%;
    top: 0;
    right: 130px;
    border-radius: 0 15px 15px 0;
    background: url(../images/idx01_img.jpg) no-repeat center/cover;
    z-index: -1
}

.idx01 .idx_box .box_img {
    width: 47%;
    max-width: 530px
}

.idx01 .idx_box .box_img .txt {
    font-size: 10px;
    margin-bottom: -1.9em
}

.idx01 .idx_box .box_img .txt .tag {
    width: 8.2em;
    aspect-ratio: 205/94;
    font-size: 2.5em;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    color: var(--clr-green);
    background: url(../images/idx01_tag.svg) no-repeat center/cover;
    margin-left: auto;
    padding: 1.4em 0 0 1.24em;
    margin-bottom: -0.68em;
    margin-right: 0.56em
}

.idx01 .idx_box .box_img .txt .tag>span {
    display: block;
    transform: rotate(14deg)
}

.idx01 .idx_box .box_img .txt .tag .num {
    font-size: 1.32em;
    letter-spacing: 0.1em
}

.idx01 .idx_box .box_img .txt .jp {
    color: #fff;
    font-size: 2.8em;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    margin-bottom: 0.6071em
}

.idx01 .idx_box .box_img .txt .en {
    color: #fff;
    font-size: 9em;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em
}

.idx01 .idx_box .box_info {
    width: 51%
}

.idx01 .box_info {
    font-size: min(1vw, 10px)
}

@media only screen and (min-width:769px) and (max-width:1200px) {
    .idx01 .idx_box .box_img .txt {
        font-size: min(0.78vw, 10px)
    }
}

@media only screen and (min-width:769px) {
    .block-common .cm-row1 {
        position: relative;
        padding-right: 40%
    }

    .block-common .cm-row1 .wrap-title02 {
        order: 1;
        width: 24.5%;
        justify-content: flex-end
    }

    .block-common .cm-row1 .cm-img {
        order: 3;
        position: absolute;
        top: 0;
        right: -19.6em
    }

    .block-common .cm-row1 .cm-cont {
        order: 2;
        width: 70%;
        padding-top: 28px
    }

    .block-common .mr {
        margin-right: 35% !important
    }

    .block-common .cm-list .item {
        width: 25%;
        max-width: 226px
    }

    .block-common .cm-list .item:hover {
        background-color: #ffce04
    }

    .block-common .cm-list .item:hover:after {
        right: 1.5em
    }

    .block-common .cm-bx .btn-group .btn {
        width: 25%;
        max-width: 226px
    }

    .block-common .cm-row3 .col {
        width: 48%
    }

    .block-common .cm-row3 .cm-list {
        width: 46%;
        margin-right: -6px;
        margin-top: 10px
    }

    .block-common .cm-row3 .cm-list .item {
        width: 50%
    }
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .block-common {
        padding: 60px 35px 51px
    }

    .block-common .cm-row1 {
        padding-right: 35%
    }

    .block-common .cm-row1 .wrap-title02 {
        padding-left: 0;
        width: 20.5%
    }

    .block-common .cm-row1 .subtl {
        font-size: 22px;
        margin-bottom: 10px
    }

    .block-common .cm-row1 .cm-img {
        font-size: min(7px, 0.7vw);
        right: -17.6em
    }

    .block-common .cm-row1 .cm-cont {
        width: 78%;
        padding-top: 0
    }

    .block-common .cm-bx {
        padding: 96px 25px 45px
    }

    .block-common .cm-bx .cm-tl {
        padding: 12px 20px 14px
    }

    .block-common .cm-bx .cm-tl p {
        font-size: 22px
    }

    .block-common .cm-bx .btn-group {
        gap: 10px
    }

    .block-common .cm-bx .btn-group .btn {
        width: 24%;
        max-width: 224px
    }

    .block-common .cm-list {
        gap: 0.5em
    }

    .block-common .cm-list .item {
        width: 32.5%;
        max-width: 212px;
        min-height: 7em;
        font-size: min(9px, 1.1vw)
    }

    .block-common .cm-list .item:after {
        right: 1em
    }

    .block-common .cm-list .cont .img {
        width: 4.5em;
        height: 4.5em
    }

    .block-common .cm-list .cont .title {
        width: calc(100% - 2.4375em);
        padding-bottom: 0;
        letter-spacing: 0.05em;
        padding-left: 0.5em
    }

    .block-common .cm-row3 h3 {
        font-size: 20px;
        margin-bottom: 14px
    }

    .block-common .cm-row3 h3 .tt-line:before {
        height: 7px
    }

    .block-common .cm-row3 .col {
        width: 49%
    }

    .block-common .cm-row3 .cm-list {
        gap: 0.5em;
        width: 48%
    }

    .block-common .cm-row3 .cm-list .item {
        width: 48.5%
    }

    .idx01:before {
        top: -9.375vw
    }
}

@media only screen and (max-width:1000px) and (min-width:769px) {
    .block-common .cm-bx .mr {
        margin-right: 0 !important
    }

    .block-common .cm-bx .btn-group .btn {
        width: 32%;
        max-width: 295px
    }
}

.idx02 {
    padding: 100px 0;
    background-color: #f7f7f7;
    position: relative;
    z-index: 0
}

.idx02:after,
.idx02:before {
    content: "";
    position: absolute;
    z-index: -1
}

.idx02:before {
    bottom: -10px;
    left: 0;
    width: 100%;
    height: calc(100% + 40px);
    background: url(../images/idx02_mask.svg) no-repeat center bottom/100%
}

.idx02:after {
    top: -6.4em;
    left: -10.4em;
    background: url(../images/idx02_illus01.svg) no-repeat center/contain;
    width: 49.1em;
    height: 28.2em;
    font-size: 10px
}

.idx02 .inner_big {
    max-width: 1280px;
    position: relative
}

.idx02 .inner_big:after {
    content: "";
    position: absolute;
    right: 17.2em;
    bottom: -16.9em;
    width: 24.1em;
    height: 17em;
    background: url(../images/idx02_illus02.svg) no-repeat center/contain;
    font-size: 10px
}

.idx02 .img-pos {
    position: absolute;
    font-size: 10px
}

.idx02 .img01 {
    top: 9.4em;
    left: 0
}

.idx02 .img01 img {
    border-radius: 0 15px 15px 0;
    max-width: 26em
}

.idx02 .img02 {
    bottom: -19em;
    left: 8em
}

.idx02 .img02 img {
    border-radius: 15px;
    max-width: 23em
}

.idx02 .img03 {
    top: 0.1em;
    right: 0
}

.idx02 .img03 img {
    border-radius: 15px 0 0 15px;
    max-width: 28em
}

.idx02 .img03:after,
.idx02 .img03:before {
    content: "";
    position: absolute;
    height: 5.7em
}

.idx02 .img03:before {
    bottom: -1.7em;
    left: -4em;
    width: 10.3em;
    background: url(../images/idx02_cloud01.png) no-repeat center/contain
}

.idx02 .img03:after {
    bottom: -8.1em;
    right: 4.8em;
    width: 10.4em;
    background: url(../images/idx02_cloud02.png) no-repeat center/contain
}

.idx02 .wrap-title01 {
    margin-bottom: 21px
}

.idx02 .message-cont {
    max-width: 530px;
    width: 100%;
    margin: 0 auto
}

.idx02 .message-cont p {
    line-height: 2.25
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .idx02:before {
        height: 115%
    }

    .idx02:after {
        font-size: min(8px, 0.6vw)
    }

    .idx02 .img-pos {
        font-size: min(7px, 0.6vw)
    }

    .idx02 .img02 {
        bottom: -27em
    }

    .idx02 .inner_big:after {
        font-size: min(8px, 0.6vw);
        bottom: -21.9em
    }

    .idx02 .wrap-title01 h2 {
        letter-spacing: 0.01em
    }

    .idx02 .message-cont {
        max-width: 465px
    }
}

.idx03 {
    padding: 83px 0 0;
    background-color: #f7f7f7
}

.idx03 .wrap-title01 {
    margin-bottom: 63px
}

.idx03 .wrap-title01 h2:before {
    margin-bottom: 21px
}

.idx03 .wrap-title01 .en {
    color: #ffffff
}

.idx03 .block-service {
    position: relative;
    z-index: 0;
    font-size: 10px
}

.idx03 .block-service:before {
    content: "";
    position: absolute;
    top: -2.4em;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 65em;
    height: 65em;
    background: url(../images/idx03_circle.svg) no-repeat center/contain
}

.idx03 .block-service .service-item {
    position: relative;
    z-index: 0;
    max-width: 52.5em;
    width: calc((100% - 3em) / 2);
    height: 31em;
    margin-bottom: 3em
}

.idx03 .block-service .service-item:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover
}

.idx03 .block-service .service-item .link a {
    width: calc(100% + 30px)
}

.idx03 .block-service .service-item.it01 .link a,
.idx03 .block-service .service-item.it03 .link a {
    left: -30px
}

.idx03 .block-service .service-item.it01:before {
    top: -0.7em;
    left: -3em;
    border-radius: 1.5em 12em 1.5em 12em;
    background-position: top left;
    background-image: url(../images/idx03_it_bf01.svg)
}

.idx03 .block-service .service-item.it01 .service-bg {
    border-radius: 1.5em 12em 1.5em 12em;
    background-image: url(../images/idx03_img01.jpg)
}

.idx03 .block-service .service-item.it01 .service-bg:before {
    background-position: top right;
    background-image: url(../images/idx03_it_bg01.svg)
}

.idx03 .block-service .service-item.it01 .link a {
    border-radius: 1.5em 12em 1.5em 12em
}

.idx03 .block-service .service-item.it01 .service-tl {
    bottom: 0.5714285714em;
    right: 1.0714285714em
}

.idx03 .block-service .service-item.it01 .service-tl:before {
    background-image: url(../images/idx03_arr01.svg)
}

.idx03 .block-service .service-item.it02:before {
    top: -0.7em;
    right: -3em;
    border-radius: 12em 1.5em 12em 1.5em;
    background-position: bottom right;
    background-image: url(../images/idx03_it_bf02.svg)
}

.idx03 .block-service .service-item.it02 .service-bg {
    border-radius: 12em 1.5em 12em 1.5em;
    background-image: url(../images/idx03_img02.jpg)
}

.idx03 .block-service .service-item.it02 .service-bg:before {
    background-position: bottom left;
    background-image: url(../images/idx03_it_bg02.svg)
}

.idx03 .block-service .service-item.it02 .link a {
    border-radius: 12em 1.5em 12em 1.5em
}

.idx03 .block-service .service-item.it02 .service-tl {
    bottom: 0.5714285714em;
    left: 1.0357142857em;
    padding-right: 1.3928571429em
}

.idx03 .block-service .service-item.it02 .service-tl:before {
    background-image: url(../images/idx03_arr02.svg)
}

.idx03 .block-service .service-item.it03:before {
    bottom: -0.7em;
    left: -3em;
    border-radius: 12em 1.5em 12em 1.5em;
    background-position: bottom left;
    background-image: url(../images/idx03_it_bf03.svg)
}

.idx03 .block-service .service-item.it03 .service-bg {
    border-radius: 12em 1.5em 12em 1.5em;
    background-image: url(../images/idx03_img03.jpg)
}

.idx03 .block-service .service-item.it03 .service-bg:before {
    background-position: top right;
    background-image: url(../images/idx03_it_bg03.svg)
}

.idx03 .block-service .service-item.it03 .link a {
    border-radius: 12em 1.5em 12em 1.5em
}

.idx03 .block-service .service-item.it03 .service-tl {
    top: 0.5em;
    right: 1.0714285714em
}

.idx03 .block-service .service-item.it03 .service-tl:before {
    background-image: url(../images/idx03_arr03.svg)
}

.idx03 .block-service .service-item.it04:before {
    bottom: -0.7em;
    right: -3em;
    border-radius: 1.5em 12em 1.5em 12em;
    background-position: bottom right;
    background-image: url(../images/idx03_it_bf04.svg)
}

.idx03 .block-service .service-item.it04 .service-bg {
    border-radius: 1.5em 12em 1.5em 12em;
    background-image: url(../images/idx03_img04.jpg)
}

.idx03 .block-service .service-item.it04 .service-bg:before {
    background-position: top left;
    background-image: url(../images/idx03_it_bg04.svg)
}

.idx03 .block-service .service-item.it04 .link a {
    border-radius: 1.5em 12em 1.5em 12em
}

.idx03 .block-service .service-item.it04 .service-tl {
    top: 0.5em;
    left: 1.0357142857em;
    padding-right: 1.3928571429em
}

.idx03 .block-service .service-item.it04 .service-tl:before {
    background-image: url(../images/idx03_arr04.svg)
}

.idx03 .block-service .service-tl {
    font-size: 2.8em;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #ffffff;
    padding-right: 1.25em
}

.idx03 .block-service .service-tl:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0.1071428571em;
    bottom: 0;
    margin: auto;
    width: 0.9285714286em;
    height: 0.9285714286em;
    background-color: #ffffff;
    background-size: 100% auto;
    background-repeat: no-repeat;
    border-radius: 50%;
    transition: all 0.3s
}

.idx03 .block-service .service-bg {
    width: 100%;
    height: 100%;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative
}

.idx03 .block-service .service-bg:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.3s
}

.idx03 .block-service .service-tl {
    position: absolute;
    z-index: 1
}

@media only screen and (min-width:769px) {
    .idx03 .block-service .service-item:hover .service-tl:before {
        top: 0.18em
    }

    .idx03 .block-service .service-item:hover.it01 .service-bg:before {
        background-color: rgba(73, 127, 203, 0.5)
    }

    .idx03 .block-service .service-item:hover.it02 .service-bg:before {
        background-color: rgba(80, 178, 137, 0.5)
    }

    .idx03 .block-service .service-item:hover.it03 .service-bg:before {
        background-color: rgba(241, 147, 130, 0.5)
    }

    .idx03 .block-service .service-item:hover.it04 .service-bg:before {
        background-color: rgba(138, 97, 185, 0.5)
    }
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .idx03 .wrap-title01 {
        margin-bottom: 30px
    }

    .idx03 .block-service {
        padding: 0 20px;
        font-size: min(9px, 1vw)
    }

    .idx03 .block-service .service-item.it01:before {
        left: -20px
    }

    .idx03 .block-service .service-item.it02:before {
        right: -20px
    }

    .idx03 .block-service .service-item.it03:before {
        left: -20px
    }

    .idx03 .block-service .service-item.it04:before {
        right: -20px
    }
}

.idx04 {
    background-color: #f7f7f7;
    padding: 98px 0 0;
    position: relative
}

.idx04 .block-common {
    position: relative;
    z-index: 1
}

.idx04 .block-common .cm-row1 {
    padding-bottom: 51px;
    margin-bottom: 48px
}

.idx04 .block-common .cm-row1:before {
    background-image: url(../images/dot_blue.png)
}

.idx04 .block-common .cm-row1:after {
    background-image: url(../images/idx04_illus.svg);
    width: 19.2em;
    height: 16.7em;
    right: 40.6%;
    bottom: -4.9em;
    z-index: 1
}

.idx04 .block-common .cm-row3 {
    margin-top: 30px
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .idx04 {
        padding-top: 75px
    }

    .idx04 .block-common .cm-row1 {
        padding-bottom: 47px;
        margin-bottom: min(40px, 3.8vw)
    }

    .idx04 .block-common .cm-row1:before {
        width: 60%
    }

    .idx04 .block-common .cm-row1:after {
        font-size: min(8px, 0.8vw);
        right: 29.6%
    }
}

.idx05 {
    padding: 98px 0 170px;
    position: relative;
    background: url(../images/idx05_bg.png) no-repeat top center/cover
}
.idx05 .inner_big{max-width: 1220px;}
.idx05 .wrap-title02 {
    margin-bottom: 74px;
    position: relative;
    z-index: 1
}

.idx05 .block-care:before {
    content: "";
    position: absolute;
    bottom: -405px;
    left: 0;
    width: 100%;
    height: calc(100% + 894px);
    background: url(../images/idx05_bg.png) no-repeat top center/cover
}

.idx05 .block-care .care-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    z-index: -1;
    border-radius: 15px;
    overflow: hidden
}

.idx05 .block-care .care-bg:before {
    content: "";
    position: absolute;
    border-radius: 20px;
    top: 0;
    left: 1px;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #80a6db 3%, #edf2fa 50%);
    z-index: -1
}

.idx05 .block-care .item {
    color: #ffffff;
    padding: 39px 30px 40px 30px;
    position: relative;
    z-index: 0;
    border-radius: 15px;
    background: url(../images/idx05_it_bg01.jpg) no-repeat center/cover
}

.idx05 .block-care .item:nth-child(2) {
    background-image: url(../images/idx05_it_bg02.jpg)
}

.idx05 .block-care .item:nth-child(2) .care-img img {
    border-radius: 100px 7px 100px 7px
}

.idx05 .block-care h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.46;
    text-align: center;
    letter-spacing: 0.01em;
    margin-bottom: 13px
}

.idx05 .block-care .care-img {
    position: relative;
    max-width: 448px;
    margin-bottom: 23px
}

.idx05 .block-care .care-img img {
    border-radius: 7px 100px 7px 100px
}

.idx05 .block-care .care-img .pickup {
    position: absolute;
    bottom: -3em;
    right: -5em;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15.7em;
    height: 7.1em;
    padding-top: 0.2em;
    padding-right: 0.2em;
    font-size: 8px
}
.idx05 .block-care .box_in >p{letter-spacing: 0.065em;}
.idx05 .block-care .care-img .pickup:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/idx05_pickup.svg) no-repeat center/contain;
    width: 100%;
    height: 100%;
    z-index: -1
}

.idx05 .block-care .care-img .pickup span {
    font-family: var(--f-en);
    font-weight: 500;
    font-size: 2.3em;
    letter-spacing: 0.1em;
    line-height: 1;
    color: var(--main-color);
    transform: rotate(13deg)
}

.idx05 .block-care .btn-group .btn {
    max-width: 226px;
    width: 100%;
    margin: 33px auto 0
}

.idx05 .block-care .btn-group .btn a {
    padding: 0.5625em 2.85em 0.6875em 1.25em;
    line-height: 1.25
}

.idx05 .block-care .btn-group .btn.w-lg {
    max-width: 266px
}

@media only screen and (min-width:769px) {
    .idx05 .block-care .item {
        width: 32%;
        max-width: 528px
    }
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .idx05 .wrap-title02 {
        margin-bottom: 35px
    }

    .idx05 .block-care h3 {
        font-size: min(22px, 2.2vw)
    }

    .idx05 .block-care .item {
        padding: 30px 15px 35px 15px
    }

    .idx05 .block-care .btn-group .btn {
        margin-top: 25px
    }

    .idx05 .block-care .care-img .pickup {
        font-size: min(7px, 0.8vw)
    }
    .idx05 .block-care .btn-group .btn a{padding: 0.5625em 2.5em 0.6875em 1.1em;}
}

.idx06 {
    padding: 90px 0 0;
    background-color: #f7f7f7;
    position: relative;
    z-index: 1
}

.idx06:before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 400px;
    background: url(../images/idx06_wave.svg) no-repeat top center/100% auto;
    z-index: -1
}

.idx06 .block-common {
    position: relative;
    z-index: 0;
    padding-bottom: 64px
}

.idx06 .block-common:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 411px;
    background: url(../images/idx06_box_bg.png) no-repeat center/cover;
    z-index: -1;
    border-radius: 0 0 15px 15px
}

.idx06 .block-common .cm-row1 {
    padding-bottom: 51px;
    margin-bottom: 49px
}

.idx06 .block-common .cm-row1:before {
    background-image: url(../images/dot_green.png)
}

.idx06 .block-common .cm-row1:after {
    background-image: url(../images/idx06_illus.svg);
    width: 19.1em;
    height: 15.4em;
    right: 40.8%;
    bottom: -4.9em
}

.idx06 .block-common .cm-row3 {
    margin-top: 52px;
    padding-left: 0px
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .idx06 {
        padding-top: 60px
    }

    .idx06 .block-common .cm-row1 {
        padding-bottom: 47px;
        margin-bottom: min(40px, 3.8vw)
    }

    .idx06 .block-common .cm-row1:before {
        width: 60%
    }

    .idx06 .block-common .cm-row1:after {
        font-size: min(8px, 0.8vw);
        right: 29.6%
    }
}

.idx07 {
    background-color: #f7f7f7;
    padding: 118px 0 95px
}

.idx07 .bg-white {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    width: 95%;
    padding-left: 30px;
    padding-right: 0
}

.idx07 .bg-white:before {
    content: "";
    position: absolute;
    top: 53px;
    right: 0;
    width: 100vw;
    height: calc(100% + 16px);
    background-color: #ffffff;
    border-radius: 0 120px 15px 0;
    z-index: -1
}

.idx07 .wrap-title02 {
    margin-bottom: 33px
}

.idx07 .slider-diseases:not(.slick-slider) {
    opacity: 0;
    display: flex
}

.idx07 .b-diseases {
    padding-right: 222px;
    position: relative;
    align-items: flex-end;
    margin-bottom: 43px
}

.idx07 .b-diseases:before {
    content: "";
    position: absolute;
    top: -13.4em;
    right: 5.7em;
    background: url(../images/idx07_illus.svg) no-repeat center/contain;
    width: 17.7em;
    height: 22.7em;
    font-size: 10px
}

.idx07 .diseases-item {
    width: 182px !important;
    background-color: #ffeae2;
    border-radius: 10px;
    padding: 21px 20px 20px;
    margin: 0 10px;
    transition: 0.3s all;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 0
}

.idx07 .diseases-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid var(--clr-pink);
    z-index: -1;
    opacity: 0;
    transition: 0.3s all
}

.idx07 .diseases-item figure {
    width: 119px;
    height: 119px;
    background-color: #ffffff;
    border-radius: 50%;
    margin: -2px auto 13px
}

.idx07 .diseases-tl {
    font-weight: 500;
    line-height: 1.375;
    padding-right: 35px;
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: flex-end
}

.idx07 .diseases-tl:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--clr-pink) url(../images/ic_arrow.svg) no-repeat center/100% auto
}

.idx07 .slick-slide {
    height: auto
}

.idx07 .slick-slide>div {
    height: 100%
}

.idx07 .slick-track {
    display: flex
}

.idx07 .diseases-btn {
    display: flex;
    align-items: center;
    margin-top: 35px
}

.idx07 .slider_arrow {
    display: flex;
    width: 160px
}

.idx07 .slick-arrow {
    position: relative;
    transform: unset;
    top: 0;
    width: 45px;
    height: 45px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 9px auto;
    background-color: var(--clr-pink);
    border-radius: 50%
}

.idx07 .slick-arrow.prev-arrow {
    background-image: url(../images/ic_prev.svg);
    margin-right: 20px
}

.idx07 .slick-arrow.next-arrow {
    background-image: url(../images/ic_next.svg)
}

.idx07 .slider_dot {
    width: calc(100% - 160px);
    margin-top: -2px
}

.idx07 .slick-dots {
    display: flex;
    width: 100%;
    overflow: hidden;
    border-radius: 10px
}

.idx07 .slick-dots li {
    width: 12.5%;
    max-width: 106px;
    height: 7px;
    overflow: hidden
}

.idx07 .slick-dots li button {
    height: 5px;
    background-color: #f7f7f7;
    text-indent: -9999999px;
    width: 100%;
    border: 0
}

.idx07 .slick-dots li.slick-active button,
.idx07 .slick-dots li:hover button {
    background-color: var(--clr-pink);
    border-radius: 10px
}
@media only screen and (min-width:769px) {
    .idx07 .wrap-title02 {
        text-align: left
    }

    .idx07 .wrap-title02 .en {
        padding-left: 17px;
        padding-top: 0
    }

    .idx07 .wrap-title02 .en:before {
        right: unset;
        top: 5px
    }

    .idx07 .diseases-item:hover {
        background-color: #fff5f3
    }

    .idx07 .diseases-item:hover:before {
        opacity: 1
    }

    .idx07 .b-diseases .cont {
        width: 63%;
        max-width: 533px
    }

    .idx07 .b-diseases .btn-group {
        width: 33.2%;
        margin-bottom: 7px
    }

    .idx07 .b-diseases .btn-group .btn {
        max-width: 251px
    }

    .idx07 .slick-arrow {
        transition: 0.3s all
    }

    .idx07 .slick-arrow:hover {
        background-color: #d3705f
    }
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .idx07 .bg-white:before {
        height: 100%
    }

    .idx07 .wrap-title02 {
        margin-bottom: 20px
    }

    .idx07 .b-diseases {
        padding-right: 15%;
        margin-bottom: 30px
    }

    .idx07 .b-diseases:before {
        font-size: 6px
    }

    .idx07 .slider_dot {
        width: calc(100% - 190px)
    }

    .idx07 .slider_arrow {
        width: 110px
    }

    .idx07 .slick-arrow {
        width: 40px;
        height: 40px;
        background-size: 7px auto
    }

    .idx07 .slick-arrow.prev-arrow {
        margin-right: 10px
    }
}

.idx08 {
    padding: 120px 0 268px;
    position: relative;
    z-index: 0;
    margin-top: -24px
}

.idx08:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 95px);
    background: url(../images/idx08_bg.jpg) no-repeat center left/cover;
    z-index: -1
}

.idx08 .wrap-title02 {
    margin-bottom: 33px
}

.idx08 .block-service {
    background-color: #ffffff;
    border-radius: 15px 120px 15px 120px;
    position: relative;
    padding: 60px 70px 80px 70px;
    max-width: 568px;
    width: 100%;
    margin: 0 auto
}

.idx08 .block-service:before {
    content: "";
    position: absolute;
    bottom: -2.7em;
    right: 2.4em;
    background: url(../images/ic_cal.svg) no-repeat center/contain;
    width: 11.4em;
    height: 14.2em;
    font-size: 10px
}

.idx08 .btn-group .btn.style01 {
    max-width: 251px;
    width: 100%;
    margin: 33px auto 0
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .idx08 {
        padding: 100px 0 185px
    }

    .idx08 .block-service:before {
        font-size: 9px
    }
}

.idx09 {
    padding: 0 0 120px;
    position: relative;
    z-index: 1
}

.idx09:after,
.idx09:before {
    content: "";
    position: absolute
}

.idx09:before {
    background: url(../images/bg_mask.svg) no-repeat top center/100% auto;
    top: -126px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.idx09:after {
    top: -13.3em;
    left: -6.6em;
    background: url(../images/idx09_illus01.svg) no-repeat center/contain;
    width: 44.3em;
    height: 30.3em;
    z-index: 1;
    font-size: 10px
}

.idx09 .inner {
    position: relative;
    margin-top: -22px
}

.idx09 .inner:before {
    content: "";
    position: absolute;
    bottom: -7.8em;
    right: 9.3em;
    background: url(../images/idx09_illus02.svg) no-repeat center/contain;
    width: 17.1em;
    height: 18em;
    z-index: 1;
    font-size: 10px
}

.idx09 .wrap-title01 {
    margin-bottom: 64px
}

.idx09 .btn-group .btn.style01 {
    max-width: 281px
}

.idx09 .feature-cont:not(.slick-slider),
.idx09 .feature-thumb:not(.slick-slider) {
    display: flex;
    opacity: 0
}

.idx09 .feature-cont {
    padding: 39px 0 35px;
    position: relative
}

.idx09 .feature-cont:before {
    content: "";
    position: absolute;
    right: calc(-100% + 18px);
    top: -29px;
    width: 100vw;
    height: calc(100% + 60px);
    background-color: #f7f7f7;
    border-radius: 20px
}

.idx09 .feature-cont .f-point {
    font-size: 15px;
    font-weight: 500;
    font-family: var(--f-en);
    letter-spacing: 0;
    line-height: 1;
    color: var(--main-color);
    left: 0;
    margin-bottom: 10px
}

.idx09 .feature-cont h3 {
    font-size: 26px;
    color: var(--main-color);
    line-height: 1.7;
    letter-spacing: 0.075em;
    font-weight: 500;
    margin-bottom: 22px
}

.idx09 .feature-cont p {
    max-width: 390px
}

.idx09 .feature-cont .slick-dots {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-top: 23px
}

.idx09 .feature-cont .slick-dots li {
    margin-right: 7px;
    margin-bottom: 5px;
    width: 59px;
    height: 30px
}

.idx09 .feature-cont .slick-dots li:last-child {
    margin-right: 0
}

.idx09 .feature-cont .slick-dots li button {
    border-radius: 20px;
    border: 0;
    background-color: #ffffff;
    color: #d0d0d0;
    font-size: 18px;
    font-family: var(--f-en);
    line-height: 1;
    font-weight: 500;
    text-align: center;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.idx09 .feature-cont .slick-dots li.slick-active button {
    background-color: var(--main-color);
    color: #ffffff
}

.idx09 .feature-thumb .slick-list {
    overflow: unset
}

.idx09 .feature-thumb .slick-arrow {
    background-color: var(--main-color);
    background-size: 6px auto;
    background-repeat: no-repeat;
    background-position: center;
    width: 31px;
    height: 80px;
    border-radius: 5px;
    z-index: 1;
    top: calc(50% - 2px)
}

.idx09 .feature-thumb .slick-arrow.slick-prev {
    background-image: url(../images/ic_prev.svg);
    left: -15px
}

.idx09 .feature-thumb .slick-arrow.slick-next {
    background-image: url(../images/ic_next.svg);
    right: -15px
}

.idx09 .feature-thumb .thumb-item {
    position: relative
}

.idx09 .feature-thumb .thumb-item:after,
.idx09 .feature-thumb .thumb-item:before {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 104px;
    height: 57px
}

.idx09 .feature-thumb .thumb-item:before {
    top: 18px;
    left: -61px;
    background-image: url(../images/illus_cloud1.png)
}

.idx09 .feature-thumb .thumb-item:after {
    bottom: 40px;
    right: -69px;
    background-image: url(../images/illus_cloud3.png)
}

.idx09 .feature-thumb .thumb-item figure {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 15px 120px 15px 120px
}

.idx09 .feature-thumb .thumb-item figure img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

@media only screen and (min-width:769px) {
    .idx09 .wrap-title01 h2:before {
        margin-bottom: 21px
    }

    .idx09 .feature-cont {
        width: 38%;
        order: 1
    }

    .idx09 .feature-cont .slick-dots li:hover button {
        background-color: var(--main-color);
        color: #ffffff
    }

    .idx09 .feature-cont:not(.slick-slider),
    .idx09 .feature-thumb:not(.slick-slider) {
        height: 428px
    }

    .idx09 .feature-thumb {
        max-width: 574px;
        width: 56%;
        order: 2;
        position: relative;
        left: -17px
    }

    .idx09 .feature-thumb .slick-arrow {
        transition: 0.3s all
    }

    .idx09 .feature-thumb .slick-arrow:hover {
        background-color: #2a71d1
    }

    .idx09 .btn-group {
        order: 3;
        width: 100%
    }
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .idx09:before {
        top: -80px
    }

    .idx09:after {
        font-size: 7px
    }

    .idx09 .inner:before {
        font-size: 7px;
        bottom: -1.8em
    }

    .idx09 .block-feature {
        padding-left: 20px;
        align-items: flex-start
    }

    .idx09 .feature-cont h3 {
        font-size: 22px
    }

    .idx09 .feature-cont .slick-dots li {
        width: calc((100% - 35px) / 6)
    }

    .idx09 .feature-cont .slick-dots li button {
        font-size: 15px
    }
}

@media only screen and (max-width:1000px) and (min-width:769px) {
    .idx09 .feature-cont h3 .br {
        display: none
    }

    .idx09 .feature-thumb .thumb-item:after,
    .idx09 .feature-thumb .thumb-item:before {
        width: 89px;
        height: 41px
    }

    .idx09 .feature-thumb .thumb-item:before {
        left: -40px
    }

    .idx09 .feature-thumb .thumb-item:after {
        right: -45px
    }
}

.idx10 {
    background-color: #f7f7f7;
    position: relative;
    z-index: 0;
    padding-bottom: 99px
}

.idx10:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 542px);
    background: url(../images/bg_mask.svg) no-repeat bottom center/100% auto;
    z-index: -1
}

.idx10 .en {
    font-size: 90px;
    line-height: 1;
    color: #ffe370;
    font-weight: 500;
    position: relative;
    writing-mode: vertical-lr;
    letter-spacing: 0.05em
}

.idx10 .en.en-white {
    position: absolute;
    top: -259px;
    left: 53px;
    color: #ffffff
}

.idx10 .bg-illus {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto
}

.idx10 .bg-illus:before {
    content: "";
    position: absolute;
    background: url(../images/idx10_illus.svg) no-repeat center/contain;
    bottom: -0.3em;
    left: 1.5em;
    width: 17.4em;
    height: 16em;
    z-index: 1;
    font-size: 10px
}

.idx10 .bx-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 175px);
    height: calc(100% - 231px);
    overflow: hidden;
    background: url(../images/idx10_bg.jpg)
}

.idx10 .wrap-title {
    padding-left: 53px;
    margin-bottom: 38px
}

.idx10 .wrap-title h2 {
    font-size: 35px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--main-color);
    letter-spacing: 0.1em;
    position: relative;
    z-index: 1;
    margin-top: 38px
}

.idx10 .wrap-title .en {
    margin-top: -30px;
    margin-right: 62px
}

.idx10 .fblock {
    position: relative;
    z-index: 0;
}

.idx10 .fblock:before {
    content: "";
    position: absolute;
    top: 231px;
    right: 133px;
    width: 100vw;
    height: calc(100% + 800px);
    z-index: -1;
    background: url(../images/idx10_bg.jpg);
    border-top-right-radius: 120px
}

.idx10 .greeting-img {
    position: relative;
    max-width: 600px;
    font-size: 10px
}

.idx10 .greeting-img .mask {
    mask-image: url(../images/idx10_mask.svg);
    -webkit-mask-image: url(../images/idx10_mask.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% auto;
    -webkit-mask-size: 100% auto;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: #ccc;
    width: 60em;
    height: 60em;
    margin-left: 0.5em
}

.idx10 .greeting-img .mask img {
    object-fit: cover;
    width: 102%;
    height: 100%;
    position: relative;
    left: -0.1em;
    top: -0.1em
}
.idx10 .greeting-cont{
    max-width: 900px;
    margin-bottom: 94px;
}
.idx10 .txt-greeting {
    position: absolute;
    top: -2.6em;
    left: 1.7em;
    color: var(--main-color);
    font-weight: 500;
    display: table;
    max-width: 10.5em
}

.idx10 .greeting-cont {
    position: relative
}

.idx10 .btn-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 35px;
    margin-left: 5px
}

.idx10 .btn-group .btn {
    margin-bottom: 0;
    max-width: 191px
}

.idx10 .btn-group .btn a {
    min-height: 60px;
    padding: 0.2em 2.85em 0.255em 1.25em;
    line-height: 1.23
}

.idx10 .box-name {
    position: absolute;
    top: 6.2em;
    right: 7.3em;
    background-color: var(--main-color);
    border-radius: 60px;
    writing-mode: vertical-lr;
    padding: 2.4em 2em 2em 3.8em;
    width: 11em;
    height: 26em;
    display: flex;
    align-items: center;
    justify-content: center
}

.idx10 .box-name:before {
    content: "";
    position: absolute;
    border: 1px solid #ffffff;
    inset: 0.3em;
    border-radius: 60px
}

.idx10 .box-name p {
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #ffffff;
    font-weight: 500;
    line-height: 1
}

.idx10 .box-name p span {
    padding-top: 0.5384615385em;
    font-size: 1.8571428571em;
    letter-spacing: 0.1em
}

.idx10 .box-name p rt {
    font-size: 12px;
    margin-left: 0.5em;
    letter-spacing: 0.0833333333em;
    margin-top: -0.25em;
    text-align: center
}

@media only screen and (min-width:769px) {
    .idx10 .wrap-title {
        writing-mode: vertical-lr
    }

    .idx10 .b-grid {
        grid-template-columns: 39% 56%;
        justify-content: space-between
    }

    .idx10 .column-star2 {
        max-width: 600px
    }
}

@media only screen and (max-width:1024px) and (min-width:769px) {
    .idx10 {
        padding-bottom: 60px
    }

    .idx10 .en {
        font-size: 70px
    }

    .idx10 .en.en-white {
        top: -210px;
        left: 70px
    }

    .idx10 .wrap-title {
        margin-bottom: 25px;
        padding-left: 70px
    }

    .idx10 .wrap-title .en {
        margin-top: 22px;
        margin-bottom: 0;
        margin-right: 37px
    }

    .idx10 .wrap-title h2 {
        margin-top: 50px;
        font-size: 28px
    }

    .idx10 .bg-illus:before {
        font-size: 8px
    }

    .idx10 .b-grid {
        margin-bottom: 45px;
        grid-template-columns: 46% 52%
    }

    .idx10 .fblock:before {
        right: 60px
    }

    .idx10 .greeting-img {
        font-size: min(8.5px, 0.8vw)
    }

    .idx10 .box-name {
        padding: 2.4em 2em 2em 1.8em;
        height: 30em
    }

    .idx10 .box-name p {
        font-size: 12px
    }

    .idx10 .box-name p span {
        padding-top: 0.2em
    }

    .idx10 .box-name p rt {
        margin-left: 0
    }

    .idx10 .btn-group {
        padding-right: 20px;
        margin-top: 40px
    }

    .idx10 .btn-group .btn.style01 a {
        font-size: 14px
    }
}

@media only screen and (max-width:1000px) and (min-width:769px) {
    .idx10 .en.en-white {
        left: 25px
    }

    .idx10 .wrap-title {
        padding-left: 25px
    }

    .idx10 .wrap-title .en {
        margin-right: 14px
    }

    .idx10 .fblock:before {
        right: 0
    }
}

/*# sourceMappingURL=index_pc.css.map */
:root {
    --f-sulphur: "Sulphur Point", sans-serif;
    --f-jp: "Zen Maru Gothic", sans-serif;
    --main-color: #4980cb;
    --clr1: #444;
    --clr2: #ffe370;
}

.openhouse_banner {
    position: fixed;
    left: 1.5em;
    bottom: 1.5em;
    width: 15.6em;
    height: 6.25em;
 
   

    z-index: 9999;
   
    transition: transform .25s ease;
}
.openhouse_banner a{
    width: 100%;
    height: 100%;
 border: 1px solid var(--main-color);
    color: var(--main-color);
    border-radius: .6em;
    background-color: #fff;
    padding: 1em 1.2em;
    display: flex;    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
}



.openhouse_banner::before {
 
}

.openhouse_banner .sub {
    font-family: var(--f-en);
    font-size: .9em;
    letter-spacing: .08em;
    color: var(--clr-green);
    position: relative;
    z-index: 1;
}

.openhouse_banner strong {
    font-family: var(--f-jp);
    font-size: 1.45em;
      font-weight: 500;
    line-height: 1.3;
    color: var(--main-color);
    position: relative;
    z-index: 1;
}

.openhouse_banner .arrow {
    position: absolute;
    right: 0.5em;
    bottom: .1em;
    font-size: 1.2em;
    color: var(--clr-green);
    z-index: 1;
}
.openhouse_banner .close {
    position: absolute;
    top: -1em;
    right: -1em;
    width: 2em;
    height: 2em;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    border-radius: 50%;
    background: var(--clr2);
    color: var(--main-color);
    padding-left: 0.2em;
    font-size: 1em;

  
    cursor: pointer;
    transition: .2s;

}
@media only screen and (min-width:769px){
    .openhouse_banner .close:hover{
 background-color: var(--clr-green);
    }
    .openhouse_banner a:hover {
  opacity: 0.8;
}
}
/* mobile scale down */
@media (max-width: 768px) {
    .openhouse_banner {
        font-size: 13px;
        left: .8em;
        bottom: .8em;
        
    }
  .openhouse_banner.active  {
                bottom: 60px;
    }
}

@media (max-width: 480px) {
    .openhouse_banner {
       
    }
}