@charset "UTF-8";
.metaslider .flex-control-nav {
    bottom: 140px !important;
}

.metaslider .flexslider {
    margin: 0 !important;
}

.flex-control-paging li a.flex-active {
    background: rgba(255, 255, 255, 0.8) !important;
}

.eycatch {
    overflow: hidden;
    position: relative;
}

.ifsp{
    display: none;
}

@media screen and (max-width: 767px) {
    .eycatch .container-fluid{
        padding:0;
    }
    .eycatch .container-fluid .company-logo-box{
        padding:0;
    }
    .eycatch .container-fluid .company-logo-box h1{
        margin-top: 7px !important;
        margin-bottom: 6px;
        margin-left: 7px;
    }
    .ifsp{
        display: block;
    }

}

.eycatch .metaslider .caption-wrap {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    background: transparent;
    color: white;
    opacity: 0.7;
    margin: 0;
    display: block;
    width: 100%;
    line-height: 1.4em;
}

.eycatch .metaslider .caption {
    font-size: 36px;
    /*font-family: "游明朝", YuMincho, "ＭＳ Ｐ明朝", "MS PMincho", serif;*/
    font-family: "Zen Old Mincho",'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
    line-height: 1.3;
    padding:0 200px;
    text-shadow:2px 2px 3px #000000,1px -1px 3px #000000,0px 3px 6px #000000,1px -1px 0px #000000,-3px 1px 6px #010101;
}

@media screen and (max-width: 1200px) {
    .eycatch .metaslider .caption {
        font-size: 20px;
    }
}

@media screen and (max-width: 767px) {
    .eycatch .metaslider .caption {
        font-size: 16px;
        padding:0 40px;
    }
}

.eycatch .navbar {
    position: absolute;
    bottom: 10px;
    left: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
/*
.eycatch .navbar.fixed {
position: fixed;
bottom: 10px;
left: 0;
top: 0;
height: 80px;
z-index: 3;
}
*/
/* body h2 {
    text-align: center;
    position: relative;
    font-family: "游明朝", YuMincho, "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
    font-size: 2.9rem;
    margin: 120px 0 80px;
} */
@media screen and (max-width: 767px) {
    .eycatch .navbar {
        position: fixed;
        left: 0;
        top: 0;
        bottom:auto;
        z-index: 2;
    }
    /*body .navbar{
    background: rgba(0, 0, 0, 0.8);
}*/
    .metaslider .flex-control-nav {
        bottom: 10px !important;
    }
    /* body h2 {
        font-size: 2.2rem;
        margin: 40px 0;
    } */
}
/* body h2 span {
    display: block;
} */
body .hd02-img{
    position: relative;
}
body .hd02-img img{
    max-width: 800px;
    position: absolute;
    top: -80px;
    opacity: 0.2;
    right: -220px;
}

@media screen and (max-width: 600px) {
    body .hd02-img img{
        max-width: 400px;
        position: absolute;
        top: -10px;
        opacity: 0.2;
        right: -20%;
    }
}

body .hd02-img.left img{
    left: -100px;
}

body h2 .hd02-txt {
    position: relative;
}

/* body .service h2,
body .service p{
    color: #fff;
} */



@media screen and (max-width: 767px) {
    body p {
        font-size: 1.6rem;
        line-height: 1.6;
    }
}

body .concept {
    min-height: 926px;
}

body .concept__cnt__img {
    position: absolute;
    top: 0;
    left: -160px;
    z-index: 1;
}

body .concept__cnt__txt {
    width: 720px;
    /* background: #E5DDD3; */
    padding: 20px;
    margin-top: 70px;
    position: absolute;
    top: 0;
    left: -25px;
}

body .concept__cnt__txt__item {
    background: #fff;
    padding: 40px;
    background: url(../img/bg.png) repeat;
}

@media screen and (max-width: 1200px) {
    body .concept__cnt__txt {
        width: 100%;
    }
}
@media screen and (max-width: 767px) {
    body .concept__cnt__txt {width: 100%;/* background: #E5DDD3; */padding: 20px;margin-top: 0;position: relative;top: 0;left: 0;text-align: center;}
    body .concept__cnt__txt__item{
        padding: 00px;
    }
    body .concept {
        min-height: auto;
    }
}




span.caption{
    font-size: 1.4rem;
    line-height: 1.4;
    display: block;
}



body .plan {
    text-align: center;
    padding-bottom: 120px;
}

body .plan__box {
    position: relative;
}

body .plan__box ul {
    display: inline-block;
    border: solid 1px #c4ab9b;
    font-size: 2.3rem;
    padding: 10px 20px;
    margin: 30px 0;
}

body .plan__box ul li {
    color: #664b39;
}

body .plan__box ul li:before {
    content: '■';
    color: #c4ab9b;
}

body .plan__box:before {
    content: "";
    background: url(../img/index/index-plan-img01.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -220px;
    top: -20px;
    width: 360px;
    height: 231px;
}

body .plan__box:after {
    content: "";
    background: url(../img/index/index-plan-img02.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -220px;
    top: -20px;
    width: 360px;
    height: 231px;
}

body .ownerslife {
    background: url(../img/index/index-owners-bg.png);
    background-size: cover;
    padding-bottom: 60px;
}

body .ownerslife h2 {
    color: #fff;
}

body .ownerslife p {
    color: #fff;
}

body .voice {
    padding-bottom: 60px;
}

body .voice-msg {
    position: relative;
}

body .voice-msg .bg-w {
    width: 460px;
    position: absolute;
    background-color: #ffffff96;
    top: 78px;
    left: -110px;
    z-index: 2;
}

body .voice-msg .bg-w p{
    background: url(../img/bg.png) repeat;
    padding: 24px 30px;
}

.btn-othercontens{
    position: absolute;top: 260px;
}
@media screen and (max-width:1100px) {
    body .voice-msg .bg-w {
        position: static;
        width: 100%;
    }
    .btn-othercontens{
        position: absolute;top: 180px;
    }
}
body .othercontents {
    text-align: center;
    padding-bottom: 80px;
}

body .othercontents h3 {
    margin: 0;
}

body .othercontents h3 img {
    margin: 0 auto;
    text-align: center;
}

body .othercontents a {
    color: #fff;
}

body .othercontents a:hover {
    text-decoration: none;
}

body .othercontents__item01 {
    background: url(../img/index/index-other-qa-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right bottom;
    padding: 100px 10px;
    height:340px;
    position: relative;
}

body .othercontents__item02 {
    background: url(../img/index/index-other-staff-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 100px 10px;
    height:340px;
}
/* body .othercontents__item02::after{
content: url(../img/index/index-other-today_off.png);
display: inline-block;
vertical-align: middle;
margin-top: 60px;

} */
/*追加*/


@media screen and (max-width: 767px) {
    body .othercontents {
        padding-bottom: 140px;
    }

    body .plan__box:before,body .plan__box:after {
        display:none
    }
    body .plan__box {
        text-align: left;
    }

    body .service__box__item__season dl{
        position: relative;
    }
    body .service__box__item__season dl.spring:before{
        content: "春";
        font-size: 3rem;
        position: absolute;
        top: 30px;
        left: 50px;
        color: #dd8dc7;
    }
    body .service__box__item__season dl.summer:before{
        content: "夏";
        font-size: 3rem;
        position: absolute;
        top: 30px;
        left: 50px;
        color: #9cba00;
    }
    body .service__box__item__season dl.autumn:before{
        content: "秋";
        font-size: 3rem;
        position: absolute;
        top: 30px;
        left: 50px;
        color: #dda140;
    }
    body .service__box__item__season dl.winter:before{
        content: "冬";
        font-size: 3rem;
        position: absolute;
        top: 30px;
        left: 50px;
        color: #92bfce;
    }
    body .service__box__item__season {
        background-image: url(../img/index/index-season-bg-sp.png);
        background-size: auto 100%;
        background-position: left center;
        background-repeat: no-repeat;
        display: block;
        padding-left: 200px;
    }
    body .service__box__item a.readmore{
        display: none;
    }
    body .service__box__item__season dl {
        margin: 0;
        padding-left:80px;
    }
    body .service__box__item__season dt {
        display:none;
    }
    body .service__box__item__season dl,body .service__box__item__season dl dd{
        display: block;
        width: 100%;
    }
    body .service__box__item__season dl dd ul {
        padding: 40px 00px 40px 20px;
        list-style: none;
    }

    body .service__box__item__season dl dd ul li {
        font-size: 1.6rem;
        padding-bottom: 5px;
    }



    body .voice-msg p{
        width: auto;
        background: none;
        position: relative;
        top: 0;
        left: 0;
        padding: 0;
        margin-bottom: 20px;
    }
    a.btn-othercontens{
        /* display:
        none; */
    }
    body .othercontents {
        text-align: center;
        margin-bottom:130px;
    }
    body .othercontents h2{
        display: none;
    }
    body .concept__cnt__img {
        position: relative;
        top: 0;
        left: 0px;
        z-index: 1;
    }
    body .concept__cnt__txt::after {

        content: '';
        background: url(../img/index/index-concept-img02.png);
        width: 100%;
        height: auto;
        position: relative;
        right: 0px;
        bottom: 0px;

    }
    body .concept__cnt__txt{
        /* background: #fff; */
    }

    .xs-cntr{
        text-align: center;
    }

    body .service__box__item {
        background: none;
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap;

    }
    body .service__box__item__card{
        width:50%;
    }
    body .service__box__item__card__img {
        float: none;
        width: 100%;
        margin: 0 auto;
    }
    body .service__box__item__card__img img{
        margin: 0 auto;
        /* width:100px; */
    }
    body .service__box__item__card__txt {

        float: left;
        width: 100%;
        text-align: center;

    }
    body .service__box__item__card__txt p{
        text-align: left;
    }
    body .service__box__item__card__txt a img{
        display: block;
        margin:0 auto;
    }




    body .othercontents__item01,body .othercontents__item02{
        background-size:100% 100%;
        background-repeat: no-repeat center center;
        padding: 40px 10px;
        height:200px;
    }
    body .othercontents__item01 p,body .othercontents__item02 p{
        font-size:1.3rem;
    }
    body .othercontents__item01 h3 img,body .othercontents__item02 h3 img{
        max-width:70%;
        margin-bottom:8px;
    }
    body .othercontents__item02::after{
        margin-top: 3px;

    }
}


@media screen and (max-width: 500px) {
    body .service__box__item__season {
        background: none;
        display: block;
        padding-left: 16px;

    }
    body .service__box__item__season dl{
        padding-left:30px
    }
    body .service__box__item {
        background: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
    }
    body .service__box__item__season dl dd ul {

        padding: 10px 00px 10px 60px;
        list-style: none;

    }

    body .service__box__item__season dl::before{
        left:10px !important;
        top:20px !important;
    }
    body .service__box__item__card{
        width:100%;
        padding:10px
    }
    body .service__box__item__card__img {
        float: none;
        width: 100%;
        margin: 0 auto;
    }

    body .service__box__item__card__txt {

        float: left;
        width: 100%;
        text-align: center;

    }
    /*     body .service__box__item__card:nth-child(1), body .service__box__item__card:nth-child(3) {
    border-right: none;
}

    body .service__box__item__card:nth-child(1), body .service__box__item__card:nth-child(2), body .service__box__item__card:nth-child(3), body .service__box__item__card:nth-child(4)  {
    border-bottom: solid 1px #d8d0c5;
} */

}



@media screen and (max-width: 400px) {
    body .othercontents__item01,body .othercontents__item02{
        background-size: auto 100%;
        background-repeat: no-repeat center center;
        padding: 20px 10px;
        height:160px;
    }
}

.container-fluid.headmenubox{
    position: absolute;
    z-index:3;
    width:100%;
}

@media screen and (max-width: 767px) {
    .headmenubox{
        display:none;
    }
}
.headmenubox .company-logo{
    margin-top:10px !important;
}

.headcontact ul li {
    display: block;
    float: right;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.headcontact ul li:nth-child(2) a {
    background: #664b39;
    padding: 10px 20px 10px 40px;
    position: relative;
}

.headcontact ul li:nth-child(2) a:before {
    content: '';
    background: url(../img/header-form_off.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 18px;
    left: 15px;
}

.headcontact ul li:nth-child(1) a {
    background: #ed8633;
    padding: 10px 20px 10px 40px;
    position: relative;
}

.headcontact ul li:nth-child(1) a:before {
    content: '';
    background: url(../img/header-tel_off.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 18px;
    left: 15px;
}

.headcontact ul li a {
    display: block;
    color: #fff;
}

.headcontact ul li a:hover {
    text-decoration: none;
}

/*
.nav > li > a:focus, .nav > li > a:hover {
text-decoration: none;
background-color: #eee;
color: #38291F;
}*/
@media screen and (max-width: 1199px) {
    .hd02-txt::after, .hd02-txt::before {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .metaslider .slides img {
        width: auto;
        display: block;
        height: 300px;
    }
}

.flex-control-paging li a {
    width: 5px !important;
    height: 5px !important;
}

/*　20190111　*/
@media screen and (max-width:767px) {
    .metaslider .slides img {
        width: auto !important;
        display: block;
        height: 400px !important;}
    .metaslider .flexslider .slides > li,.flexslider .slides,.metaslider .flexslider,#metaslider_container_17{
        height: 400px !important;}
    .navbar-toggle{
        margin-right: 30px;
    }
}
@media screen and (max-width:1100px) {
    /*.company-logo{
    display:block !important;
    position:fixed;
    z-index: 4;
}*/
    h1.company-logo-sp {
        margin-left: 20px;
    }
    .headmenubox{
        display:block;
    }
    .headcontact{
        display:none;
    }
}
body .navbar-nav{
    margin:0 10%
}
.main-inner{
    overflow: hidden;
    padding-top: 80px;
}
body .navbar.fixed{
    max-height: 63px;
}
body header .company-logo {
    margin: 20px 0;
}

@media (max-width:640px) {

    .home .main-menu a, .home .p-tel, .home .sph1 p, .slider-pro p.sp-layer {
        text-shadow: 4px 4px 11px #000000, -4px -4px 11px #000000
    }

    .slider-pro p.sp-layer {
        font-size: 23px!important;
        width: 100%!important;
        white-space: inherit!important;
        top: 0px!important;
        visibility: inherit!important
    }
}


@media (max-width:640px) {

    .slider-pro img.sp-image, .slider-pro img.sp-thumbnail{
        max-width: 162% !important;
        margin:50px 0 0 -25% !important;
    }
    .slider-pro p.sp-layer{
        top: 62px!important;
    }
}


@media (max-width:480px) {

    .slider-pro img.sp-image, .slider-pro img.sp-thumbnail{
        max-width: 162% !important;
        margin:50px 0 0 -25% !important;
    }
    .slider-pro p.sp-layer{
        top: 62px!important;
        font-size: 20px!important;
    }

}
.slider-pro p.sp-layer{
    text-shadow: 4px 4px 11px #000000, -4px -4px 11px #000000;
}


/*TOP - direct*/

.list-inline li a span{
    line-height: 0;
    display: block;
    font-size: 11px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 11px;
    right: 20px;
}

.slider-pro{position:relative;margin:0 auto;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.sp-slides-container{position:relative}.sp-mask{position:relative;overflow:hidden}.sp-slides{position:relative;-webkit-backface-visibility:hidden;-webkit-perspective:1000}.sp-slide{position:absolute}.sp-image-container{overflow:hidden}.sp-image{position:relative;display:block;border:none}.sp-no-js{overflow:hidden;max-width:100%}.sp-thumbnails-container{position:relative;overflow:hidden;direction:ltr}.sp-bottom-thumbnails,.sp-top-thumbnails{left:0;margin:0 auto}.sp-top-thumbnails{position:absolute;top:0;margin-bottom:4px}.sp-bottom-thumbnails{margin-top:4px}.sp-left-thumbnails,.sp-right-thumbnails{position:absolute;top:0}.sp-right-thumbnails{right:0;margin-left:4px}.sp-left-thumbnails{left:0;margin-right:4px}.sp-thumbnails{position:relative}.sp-thumbnail{border:none}.sp-thumbnail-container{position:relative;display:block;overflow:hidden;float:left;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.sp-rtl .sp-thumbnail-container{float:right}.sp-bottom-thumbnails .sp-thumbnail-container,.sp-top-thumbnails .sp-thumbnail-container{margin-left:2px;margin-right:2px}.sp-bottom-thumbnails .sp-thumbnail-container:first-child,.sp-top-thumbnails .sp-thumbnail-container:first-child{margin-left:0}.sp-bottom-thumbnails .sp-thumbnail-container:last-child,.sp-top-thumbnails .sp-thumbnail-container:last-child{margin-right:0}.sp-left-thumbnails .sp-thumbnail-container,.sp-right-thumbnails .sp-thumbnail-container{margin-top:2px;margin-bottom:2px}.sp-left-thumbnails .sp-thumbnail-container:first-child,.sp-right-thumbnails .sp-thumbnail-container:first-child{margin-top:0}.sp-left-thumbnails .sp-thumbnail-container:last-child,.sp-right-thumbnails .sp-thumbnail-container:last-child{margin-bottom:0}.sp-right-thumbnails.sp-has-pointer{margin-left:-13px}.sp-right-thumbnails.sp-has-pointer .sp-thumbnail{position:absolute;left:18px;margin-left:0!important}.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before{content:'';position:absolute;height:100%;border-left:5px solid #F00;left:0;top:0;margin-left:13px}.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after{content:'';position:absolute;width:0;height:0;left:0;top:50%;margin-top:-8px;border-right:13px solid #F00;border-top:8px solid transparent;border-bottom:8px solid transparent}.sp-left-thumbnails.sp-has-pointer{margin-right:-13px}.sp-left-thumbnails.sp-has-pointer .sp-thumbnail{position:absolute;right:18px}.sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:before{content:'';position:absolute;height:100%;border-left:5px solid #F00;right:0;top:0;margin-right:13px}.sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after{content:'';position:absolute;width:0;height:0;right:0;top:50%;margin-top:-8px;border-left:13px solid #F00;border-top:8px solid transparent;border-bottom:8px solid transparent}.sp-bottom-thumbnails.sp-has-pointer{margin-top:-13px}.sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail{position:absolute;top:18px;margin-top:0!important}.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before{content:'';position:absolute;width:100%;border-bottom:5px solid #F00;top:0;margin-top:13px}.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after{content:'';position:absolute;width:0;height:0;left:50%;top:0;margin-left:-8px;border-bottom:13px solid #F00;border-left:8px solid transparent;border-right:8px solid transparent}.sp-top-thumbnails.sp-has-pointer{margin-bottom:-13px}.sp-top-thumbnails.sp-has-pointer .sp-thumbnail{position:absolute;bottom:18px}.sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:before{content:'';position:absolute;width:100%;border-bottom:5px solid #F00;bottom:0;margin-bottom:13px}.sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:after{content:'';position:absolute;width:0;height:0;left:50%;bottom:0;margin-left:-8px;border-top:13px solid #F00;border-left:8px solid transparent;border-right:8px solid transparent}.sp-layer{position:absolute;margin:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-font-smoothing:subpixel-antialiased;-webkit-backface-visibility:hidden}.sp-black{color:#FFF;background:black;background:rgba(0, 0, 0, 0.7)}.sp-white{color:#000;background:white;background:rgba(255, 255, 255, 0.7)}.sp-rounded{border-radius:10px}.sp-padding{padding:10px}.sp-grab{cursor:url(images/openhand.html), move}.sp-grabbing{cursor:url(images/closedhand.html), move}.sp-selectable{cursor:default}.sp-caption-container{text-align:center;margin-top:10px}.sp-full-screen{margin:0!important;background-color:#000}.sp-full-screen-button{position:absolute;top:5px;right:10px;font-size:30px;line-height:1;cursor:pointer;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.sp-full-screen-button:before{content:'\2195'}.sp-fade-full-screen{opacity:0;-webkit-transition:opacity 0.5s;-o-transition:opacity 0.5s;transition:opacity 0.5s}.slider-pro:hover .sp-fade-full-screen{opacity:1}.sp-buttons{position:relative;width:100%;text-align:center;padding-top:10px}.sp-rtl .sp-buttons{direction:rtl}.sp-full-screen .sp-buttons{display:none}.sp-button{width:10px;height:10px;border:2px solid #000;border-radius:50%;margin:4px;display:inline-block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}.sp-selected-button{background-color:#000}@media only screen and (min-width:768px) and (max-width:1024px){.sp-button{width:14px;height:14px}}@media only screen and (min-width:568px) and (max-width:768px){.sp-button{width:16px;height:16px}}@media only screen and (min-width:320px) and (max-width:568px){.sp-button{width:18px;height:18px}}.sp-arrows{position:absolute}.sp-fade-arrows{opacity:0;-webkit-transition:opacity 0.5s;-o-transition:opacity 0.5s;transition:opacity 0.5s}.sp-slides-container:hover .sp-fade-arrows{opacity:1}.sp-horizontal .sp-arrows{width:100%;left:0;top:50%;margin-top:-15px}.sp-vertical .sp-arrows{height:100%;left:50%;top:0;margin-left:-10px}.sp-arrow{position:absolute;display:block;width:20px;height:30px;cursor:pointer}.sp-vertical .sp-arrow{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sp-horizontal .sp-previous-arrow{left:20px;right:auto}.sp-horizontal.sp-rtl .sp-previous-arrow{right:20px;left:auto}.sp-horizontal .sp-next-arrow{right:20px;left:auto}.sp-horizontal.sp-rtl .sp-next-arrow{left:20px;right:auto}.sp-vertical .sp-previous-arrow{top:20px}.sp-vertical .sp-next-arrow{bottom:20px;-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sp-next-arrow:after,.sp-next-arrow:before,.sp-previous-arrow:after,.sp-previous-arrow:before{content:'';position:absolute;width:50%;height:50%;background-color:#FFF}.sp-arrow:before{left:30%;top:0;-webkit-transform:skew(145deg, 0deg);-ms-transform:skew(145deg, 0deg);transform:skew(145deg, 0deg)}.sp-arrow:after{left:30%;top:50%;-webkit-transform:skew(-145deg, 0deg);-ms-transform:skew(-145deg, 0deg);transform:skew(-145deg, 0deg)}.sp-next-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sp-horizontal.sp-rtl .sp-previous-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sp-horizontal.sp-rtl .sp-next-arrow{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}.ie7 .sp-arrow,.ie8 .sp-arrow{width:0;height:0}.ie7 .sp-arrow:after,.ie7 .sp-arrow:before,.ie8 .sp-arrow:after,.ie8 .sp-arrow:before{content:none}.ie7.sp-horizontal .sp-previous-arrow,.ie8.sp-horizontal .sp-previous-arrow{border-right:20px solid #FFF;border-top:20px solid transparent;border-bottom:20px solid transparent}.ie7.sp-horizontal .sp-next-arrow,.ie8.sp-horizontal .sp-next-arrow{border-left:20px solid #FFF;border-top:20px solid transparent;border-bottom:20px solid transparent}.ie7.sp-vertical .sp-previous-arrow,.ie8.sp-vertical .sp-previous-arrow{border-bottom:20px solid #FFF;border-left:20px solid transparent;border-right:20px solid transparent}.ie7.sp-vertical .sp-next-arrow,.ie8.sp-vertical .sp-next-arrow{border-top:20px solid #FFF;border-left:20px solid transparent;border-right:20px solid transparent}.sp-thumbnail-arrows{position:absolute}.sp-fade-thumbnail-arrows{opacity:0;-webkit-transition:opacity 0.5s;-o-transition:opacity 0.5s;transition:opacity 0.5s}.sp-thumbnails-container:hover .sp-fade-thumbnail-arrows{opacity:1}.sp-bottom-thumbnails .sp-thumbnail-arrows,.sp-top-thumbnails .sp-thumbnail-arrows{width:100%;top:50%;left:0;margin-top:-12px}.sp-left-thumbnails .sp-thumbnail-arrows,.sp-right-thumbnails .sp-thumbnail-arrows{height:100%;top:0;left:50%;margin-left:-7px}.sp-thumbnail-arrow{position:absolute;display:block;width:15px;height:25px;cursor:pointer}.sp-left-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow,.sp-right-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sp-bottom-thumbnails .sp-previous-thumbnail-arrow,.sp-top-thumbnails .sp-previous-thumbnail-arrow{left:0px}.sp-bottom-thumbnails .sp-next-thumbnail-arrow,.sp-top-thumbnails .sp-next-thumbnail-arrow{right:0px}.sp-left-thumbnails .sp-previous-thumbnail-arrow,.sp-right-thumbnails .sp-previous-thumbnail-arrow{top:0px}.sp-left-thumbnails .sp-next-thumbnail-arrow,.sp-right-thumbnails .sp-next-thumbnail-arrow{bottom:0px}.sp-next-thumbnail-arrow:after,.sp-next-thumbnail-arrow:before,.sp-previous-thumbnail-arrow:after,.sp-previous-thumbnail-arrow:before{content:'';position:absolute;width:50%;height:50%;background-color:#FFF}.sp-previous-thumbnail-arrow:before{left:30%;top:0;-webkit-transform:skew(145deg, 0deg);-ms-transform:skew(145deg, 0deg);transform:skew(145deg, 0deg)}.sp-previous-thumbnail-arrow:after{left:30%;top:50%;-webkit-transform:skew(-145deg, 0deg);-ms-transform:skew(-145deg, 0deg);transform:skew(-145deg, 0deg)}.sp-next-thumbnail-arrow:before{right:30%;top:0;-webkit-transform:skew(35deg, 0deg);-ms-transform:skew(35deg, 0deg);transform:skew(35deg, 0deg)}.sp-next-thumbnail-arrow:after{right:30%;top:50%;-webkit-transform:skew(-35deg, 0deg);-ms-transform:skew(-35deg, 0deg);transform:skew(-35deg, 0deg)}.ie7 .sp-thumbnail-arrow,.ie8 .sp-thumbnail-arrow{width:0;height:0}.ie7 .sp-thumbnail-arrow:after,.ie7 .sp-thumbnail-arrow:before,.ie8 .sp-thumbnail-arrow:after,.ie8 .sp-thumbnail-arrow:before{content:none}.ie7 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow,.ie7 .sp-top-thumbnails .sp-previous-thumbnail-arrow,.ie8 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow,.ie8 .sp-top-thumbnails .sp-previous-thumbnail-arrow{border-right:12px solid #FFF;border-top:12px solid transparent;border-bottom:12px solid transparent}.ie7 .sp-bottom-thumbnails .sp-next-thumbnail-arrow,.ie7 .sp-top-thumbnails .sp-next-thumbnail-arrow,.ie8 .sp-bottom-thumbnails .sp-next-thumbnail-arrow,.ie8 .sp-top-thumbnails .sp-next-thumbnail-arrow{border-left:12px solid #FFF;border-top:12px solid transparent;border-bottom:12px solid transparent}.ie7 .sp-left-thumbnails .sp-previous-thumbnail-arrow,.ie7 .sp-right-thumbnails .sp-previous-thumbnail-arrow,.ie8 .sp-left-thumbnails .sp-previous-thumbnail-arrow,.ie8 .sp-right-thumbnails .sp-previous-thumbnail-arrow{border-bottom:12px solid #FFF;border-left:12px solid transparent;border-right:12px solid transparent}.ie7 .sp-left-thumbnails .sp-next-thumbnail-arrow,.ie7 .sp-right-thumbnails .sp-next-thumbnail-arrow,.ie8 .sp-left-thumbnails .sp-next-thumbnail-arrow,.ie8 .sp-right-thumbnails .sp-next-thumbnail-arrow{border-top:12px solid #FFF;border-left:12px solid transparent;border-right:12px solid transparent}a.sp-video{text-decoration:none}a.sp-video img{-webkit-backface-visibility:hidden;border:none}a.sp-video:after{content:'\25B6';position:absolute;width:45px;padding-left:5px;height:50px;border:2px solid #FFF;text-align:center;font-size:30px;border-radius:30px;top:0;color:#FFF;bottom:0;left:0;right:0;background-color:rgba(0, 0, 0, 0.2);margin:auto;line-height:52px}.slider-pro img.sp-image,.slider-pro img.sp-thumbnail{max-width:none;max-height:none;border:none!important;border-radius:0!important;padding:0!important;-webkit-box-shadow:none!important;-mox-box-shadow:none!important;box-shadow:none!important;transition:none;-moz-transition:none;-webkit-transition:none;-o-transition:none}.slider-pro a{position:static;transition:none!important;-moz-transition:none!important;-webkit-transition:none!important;-o-transition:none!important}.slider-pro canvas,.slider-pro embed,.slider-pro iframe,.slider-pro object,.slider-pro video{max-width:none;max-height:none}.slider-pro p.sp-layer{/*background-color: rgba(0,0,0,0.4) !important;border-radius:5px;*/ font-size:42px;color:#fff;line-height:1.5;font-weight:bold;font-family:"Yu Mincho","YuMincho",Verdana,Meiryo,"M+ 1p",sans-serif}.slider-pro h1.sp-layer{font-size:32px;line-height:1.4;margin:0}.slider-pro h2.sp-layer{font-size:24px;line-height:1.4;margin:0}.slider-pro h3.sp-layer{font-size:19px;line-height:1.4;margin:0}.slider-pro h4.sp-layer{font-size:16px;line-height:1.4;margin:0}.slider-pro h5.sp-layer{font-size:13px;line-height:1.4;margin:0}.slider-pro h6.sp-layer{font-size:11px;line-height:1.4;margin:0}.slider-pro img.sp-layer{border:none}@-webkit-keyframes zi{0%{-webkit-transform:scale(1)}to{-webkit-transform:scale(1.3)}}@-moz-keyframes zi{0%{-webkit-transform:scale(1)}to{-webkit-transform:scale(1.3)}}@-o-keyframes zi{0%{-webkit-transform:scale(1)}to{-webkit-transform:scale(1.3)}}@-ms-keyframes zi{0%{-webkit-transform:scale(1)}to{-webkit-transform:scale(1.3)}}
.zoomin1{
    -webkit-animation:zi 12.5s ease-in 0s 1 alternate;-moz-animation:zi 12.5s ease-in 0s 1 alternate;-o-animation:zi 12.5s ease-in 0s 1 alternate;-ms-animation:zi 12.5s ease-in 0s 1 alternate;animation:zi 12.5s ease-in 0s 1 alternate
}


.headcontact li a span{
    line-height: 0;
    display: block;
    font-size: 10px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 10px;
    right: 18px;
    padding: 0;
}


.topme-out{
    background-color: #ede9e4;

}
.topme{
    padding: 5px 0 6px;
    text-align: center;
}
.topme a{
    color: #333;
    text-decoration: underline;
}
.topme .p:hover {
    position: relative;
    text-decoration: none;
}
.topme .p span {
    display: none;
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 1000;
}
.topme .p span{

}
.topme .p:hover span {
    border: none;
    display: block;
    width: 210px;
}
.topme a:hover img{
    opacity: 1;
    filter: alpha(opacity=100);
}
.noneimg{
    display: none;
    position: absolute;
    width: 300px;
    top: 467px;
    left: 50%;
    margin: 0 0 0 -150px;
}


body .concept {
    min-height: 1000px;
    margin-top: 30px;
}

.noneimg2{
    display: none;
    position: fixed;
    width: 300px;
    top: 360px;
    right: 99px;
    margin: 0;
    z-index: 10000;
}

/* トップページお花のスライダー */
        /* クラス名を変更 */
        .flower-slider-container {
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
        }

        /* クラス名を変更 */
        .flower-slider-wrapper {
            display: flex;
            white-space: nowrap;
            animation: slideAnimation linear infinite;
            will-change: transform;
            transform: translateZ(0);
            /* background-color: blanchedalmond; */
        }

        .flower-slider-wrapper img {
            height: 300px;
            width: auto;
            margin-right: 30px;
            vertical-align: middle;
            object-fit: cover;
            flex-shrink: 0;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        }

        .flower-slider-wrapper img.vertical-small {
            height: 350px;
        }
        .flower-slider-wrapper img.horizontal {
            height: 280px;
            width: auto;
        }
        .flower-slider-wrapper img.vertical-large {
            height: 400px;
        }

        @keyframes slideAnimation {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(var(--slide-distance));
            }
        }


        .ms-content-wrapper {
    display: flex; /* Flexboxを有効にする */
    flex-direction: row; /* デフォルトで横並び */
    align-items: center; /* 垂直方向の中央揃え */
    max-width: 1200px; /* コンテナの最大幅 */
    width: 100%; /* 幅を100%に設定し、max-widthで制限 */
    margin: auto; /* 中央揃え */
    gap: 40px; /* 画像とテキストエリアの間の余白 */
    padding: 20px; /* コンテナ内部のパディング */
    box-sizing: border-box;
}

.ms-image-section {
    flex: 1; /* 利用可能なスペースに応じて伸縮 */
    min-width: 300px; /* 画像エリアの最小幅 */
    text-align: center; /* 画像を中央に配置 */
}

.ms-image-section img {
    max-width: 100%; /* 親要素に合わせて画像を最大幅に */
    height: auto; /* アスペクト比を保つ */
    display: block; /* 画像の下に余計なスペースができないように */
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影 */
}

.ms-text-section {
    flex: 1; /* 利用可能なスペースに応じて伸縮 */
    background-color: #ffffff; /* テキストエリアの背景色 */
    padding: 30px; /* テキストエリア内部のパディング */
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影 */
    position: relative; /* 疑似要素の基準位置とする */
    /* overflow: hidden; */
    min-width: 300px; /* テキストエリアの最小幅 */
}

.ms-text-section::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -20px;
    width: 70%;
    height: 50%;
    background-color: #cbdeba;
    /* transform: rotate(5deg); */
    z-index: 0;
    /* border-radius: 8px; */
}

.ms-text-section h2,
.ms-text-section p {
    position: relative; /* 疑似要素の上に表示されるようにする */
    z-index: 1; /* テキストを疑似要素より前面に */
    margin-bottom: 1em;
}

/* 768px以下の時のレスポンシブ対応 */
@media (max-width: 768px) {
    .ms-content-wrapper {
        flex-direction: column; /* 縦並びにする */
        gap: 30px; /* 縦並び時の余白 */
        padding: 15px;
    }

    .ms-image-section,
    .ms-text-section {
        flex: none; /* 伸縮しないように */
        width: 100%; /* 幅を100%に */
        min-width: unset; /* 最小幅をリセット */
    }

    .ms-image-section img {
        margin: 0 auto; /* 中央揃え */
    }
}

/* スマートフォンでの左右マージン調整 */
@media (max-width: 480px) {
    .ms-content-wrapper {
        padding: 10px;
    }

    .ms-text-section {
        padding: 20px;
    }

    .ms-text-section::before {
        width: 80px; /* スマートフォンでは少し小さく */
        height: 80px;
        top: -15px;
        right: -15px;
    }
}


body {
  font-family:
  
  "Zen Old Mincho","游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 400;
  font-style: normal;
  color: #333;
}


html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* 0729追加-ヘッダー */


@media (min-width: 787px) {
  .mt-head-nav-item.has-dropdown {
    position: relative;
    /* padding-bottom: 10px; ← 削除またはコメントアウト */
  }

  .mt-head-nav-item > a {
    display: block;
    /* padding: 15px 20px; */
    text-decoration: none;
    color: #fff;
    height: 50px;
  }

  /* このルールは削除または統合 */
  /* .mt-head-nav-item a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 15px;
    text-decoration: none;
    color: #fff;
  } */

  .mt-head-nav-item .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* 下に密着 */
    left: 0;
    background: #000;
    min-width: 220px;
    padding: 0px 0;
    z-index: 1000;
  }

  .mt-head-nav-item .dropdown-menu li {
    /* padding: 8px 20px; */
    height: 50px;
    white-space: nowrap;
  }

  .mt-head-nav-item .dropdown-menu li a {
    color: #fff;
    text-decoration: none;
    display: block;
    line-height: 2.1;
  }

  .mt-head-nav-item .dropdown-menu li a:hover {
    color: #303030;
    height: 100%;
  }

  .mt-head-nav-item.has-dropdown:hover .dropdown-menu {
    display: block;
  }
  .mt-head-nav-item .dropdown-menu {
  margin-top: -1px; /* リストとリンクの隙間をなくす */
}

.mt-head-nav-item > a {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none !important; /* 元の下線は無効化 */
}

.mt-head-nav-item > a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px; /* テキストとの距離 */
  transform: translateX(-50%);
  width: 70px; /* 横幅：テキスト幅の50%（調整可） */
  height: 1px; /* 線の太さ */
  background-color: #fff;
  opacity: 0;
  transition: all 0.3s ease;
}

.mt-head-nav-item > a:hover::after {
  opacity: 1;
  margin-bottom: 7px;
}

}


    .cta-tel-number {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: center;
    /* background-color: #3f7a7a; */
    color: #ffffff;
    width: 175px;
    position: absolute;
    top: 40px;
    right: 0;
    height: 45px;
    /* line-height: 25px; */
    margin-bottom: 0px;
}

.cta-tel-icon {
    width: 22px;
    height: 22px;
    /* margin-left: 10px; */
    margin-right: 2px;
}

/* メールアイコン */
.dl-construction-form {
    display: flex;
    /* align-items: center; */
    /* gap: 10px; */
    /* justify-content: flex-end; */
    /* background-color: #3f7a7a; */
    color: #ffffff;
    /* width: 200px; */
    position: absolute;
    top: 40px;
    right: 180px;
    /* margin-right: 10px; */
    margin-bottom: 0px;
}

.construction-icon {
    width: 28px;
    height: 28px;
    margin-left: 10px;
}

    .mt-head-dl-con {
        background-color: #ffffff;
        color: #303030;
        padding: 5px 5px 5px 5px;
        text-decoration: none;
        font-size: 1.5rem;
        white-space: nowrap;
        /* border-radius: 5px; */
        height: 45px;
        letter-spacing: 0;
        line-height: 33px;
    }

.mt-head-dl-con:hover {
  background-color: #000;
  color: #fff;
  text-decoration: none;
}

    .mt-head-header {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        transition: background-color 0.3s ease;
        box-sizing: border-box;
        padding: 5px 0 0 0;
        display: flex;
        flex-direction: column; /* ヘッダー全体を縦方向に並べる */
        align-items: center; /* 横方向の中央寄せ */
        /* background-image: url('header_background.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; */
        height: 100px;
    }

    .mt-head-fixed-dark {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .mt-head-top-area {
        width: 100%;
        display: flex;
        justify-content: center; /* 中央のコンテンツを中央に寄せる */
        align-items: flex-start; /* 上揃え */
        position: relative; /* 子要素のabsolute配置の基準 */
        /* margin-bottom: 20px; */
    }

    .mt-head-center-content { /* ロゴとナビメニューをまとめるラッパー */
        display: flex;
        flex-direction: column; /* ロゴとナビメニューを縦並び */
        align-items: center; /* ラッパー内の要素を中央寄せ */
        flex-grow: 1; /* 利用可能なスペースを埋める（電話番号との位置関係のため） */
    }

    .mt-head-logo {
        margin-bottom: 0px; /* ロゴとナビメニューの間のスペース */
    }

    .mt-head-logo img {
        height: 50px;
        width: auto;
        object-fit: contain;
    }

    .mt-head-navigation {
        /* .mt-head-center-content 内にあるので、width: 100% と justify-content: center はそちらで制御 */
        width: 100%; /* 親要素に広がる */
        display: flex; /* flexboxを適用 */
        justify-content: center; /* 内部のリストを中央寄せ */
    }

    .mt-head-nav-list {
        list-style: none;
        margin: 0px;
        padding: 0;
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        justify-content: center;
        /* position: relative; */
        /* height: 20px; */
    }

    .mt-head-nav-item {
        position: relative;
        margin: 0 15px;
    }

    .mt-head-nav-item:not(:last-child)::after {
    content: ''; /* Required for pseudo-elements */
    position: absolute; /* Positions the line relative to the menu item */
    right: -17px; /* Aligns the line to the right of the menu item */
    top: 38%; /* Starts the line at the vertical middle */
    transform: translateY(-50%); /* Adjusts for half the line's height to perfectly center it */
    width: 1px; /* Thickness of the vertical line */
    height: 40%; /* Adjust this value to control the height of the line */
    background-color: #ccc; /* Color of the vertical line */
}

    .mt-head-nav-item a {
        /* color: #fff; */
        text-decoration: none;
        font-size: 1.8rem;
        white-space: nowrap;
        padding: 5px 0;
    }

    .mt-head-nav-item a:hover {
        text-decoration: underline;
    }

    .mt-head-contact-info {
        /* display: flex; */
        /* flex-direction: column; */
        /* align-items: flex-end; */ /* 右寄せ */
        position: absolute; /* .mt-head-top-area を基準に配置 */
        right: 0; /* 右端に配置 */
        top: 0; /* 上端に配置 */
        padding-right: 0px; /* .mt-head-header の padding と合わせる */
        box-sizing: border-box; /* paddingを含めて幅を計算 */
    }

    .mt-head-tagline {
        font-size: 1.4rem;
        margin: 0 0 5px 0;
        white-space: nowrap;
        color: #ddd;
    }

    .mt-head-phone-number {
        /* background-color: #4a8a6f; */
        color: #fff;
        padding: 5px 0px 5px 0px;
        text-decoration: none;
        font-size: 1.9rem;
        white-space: nowrap;
        /* border-radius: 5px; */
    }


    .cta-tel-number {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  padding: 0px 0px;
  background-color: transparent;
  transition: background-color 0.3s, color 0.3s;
  background-color: var(--main-green-color);
}

.cta-tel-number:hover {
  background-color: #fff;
}

.cta-tel-number:hover .mt-head-phone-number {
  color: #000;
  text-decoration: none;
}

.cta-tel-number .mt-head-phone-number {
  color: #fff; /* 初期色（背景が黒などなら） */
  text-decoration: none;
}

.cta-tel-icon {
  fill: #fff; /* 初期色 */
  transition: fill 0.3s;
}

.cta-tel-number:hover .cta-tel-icon {
  fill: #000; /* ホバー時に黒へ */
}


    .cta-tel-number:hover {
  background-color: #fff;
  color: #000;
  text-decoration: none;
}


/* カスタムプロパティ */
:root {
  --main-green-color: #65a575;
  --sub-color-01: #eeeeee;
  --sub-color-02: #e7e4de;
  --sub-color-03: #a7b4a7;
  --mail-button-color: #205956;
  --line-button-color: #8aff8a;
}

/* ふわっと上がる */
/* アニメーションの初期状態 */
.fade-up-trigger {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* アニメーション後の状態 */
.fade-up-trigger.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* 各セクションの共通見出しスタイル */
.section-tit-wrap {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
    padding-top: 70px;
}

.section-tit-text {
    margin-top: 20px;
}

.section-tit {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 8px;
    line-height: 1.5;
    text-align: center;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    margin: 0 auto;
    width: 500px;
    min-width: 400px;
}


.section-tit.is-visible {
    opacity: 1;
    transform: translateY(0);
}


.section-tit span {
    display: inline-block;
    text-indent: 8px;
    font-size: 28px;
}


.section-tit .eng {
    display: block;
    margin: 0 0 0px;
    color: #525252;
    font-size: 12px;
    letter-spacing: 3px;
    text-indent: 3px;
}


.section-tit .line {
    display: block;
    width: 0;
    height: 1px;
    background-color: #000000;
    margin: 10px auto;
    overflow: hidden;
}


.tit-white .eng {
    color: #ffffff !important;
}


.tit-white .line {
    background-color: #ffffff !important;
}


.section-tit.is-visible .line {
    animation: drawLine 1.5s forwards;
    animation-delay: 0.5s;
}


@keyframes drawLine {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .section-tit {
    /* font-size: 30px; */
    letter-spacing: 8px;
    line-height: 1.5;
    width: 250px;
    min-width: 300px;
    min-width: 290px;
}

.section-tit span {
    display: inline-block;
    text-indent: 8px;
    font-size: 25px;
}
}

/* サブ見出し */
.subtext-wrapper {
    margin: 0 auto;
    text-align: left;
    width: 500px;
    /* margin-bottom: 20px; */
}

.subtext-wrapper-left {
    margin: 0;
}


.styled-heading-02 {
    position: relative;
    /* padding-left: 20px; */
    /* font-weight: bold; */
    /* text-align: center; */
    text-align: left;
    margin-left: 20px;
    margin-bottom: 20px;
    /* text-align: center; */
}

.styled-heading-02::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 80%;
    background-color: var(--main-green-color);
}

.styled-heading-02 span {
    display: block;
    font-size: 24px;
}

.sub-heading-wrapper {
    margin: 0 auto;
    text-align: center;
    /* width: 500px; */
}


.sub-heading {
    position: relative;
    /* padding-left: 20px; */
    /* font-weight: bold; */
    text-align: center;
    margin-left: 20px;
    /* margin-bottom: 20px; */
    /* text-align: center; */
}


.sub-heading::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 80%;
    background-color: var(--main-green-color);
}

.sub-heading span {
    display: block;
    font-size: 24px;
}

/* サブ見出し２ */
.small-heading-01 {
    /* padding-left: 8%; */
    font-size: 24px;
    /* font-family: "YakuHanJP", dnp-shuei-mincho-pr6n, sans-serif; */
    font-weight: 600;
    margin: 0 auto;
    margin-bottom: 0.5em;
    padding: 0.6rem 0;
    text-align: center;
    /* color: #333; */
    border-top: 1px solid #9e9e9e;
    border-bottom: 1px solid #9e9e9e;
    width: 40%;
    /* max-width: 500px; */
    min-width: 200px;
}


/* サブ見出し3 */
.small-heading-03 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
      font-size: 24px;

}

.small-heading-03-wrap {
        margin: 0 auto;
    text-align: center;
}

.small-heading-03:before, .small-heading-03:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

.small-heading-03:before {
  left:0;
}
.small-heading-03:after {
  right: 0;
}


/* ボタンの共通スタイル */
.button-area {
  margin: 0 auto;
  margin-top: 0px;
  /* width: 200px; */
}

.button-area a {
  margin: 0 auto;
}

a.btn-com {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: 10px;
    padding: 0.8rem 2rem 0.8rem;
    width: 350px;
    color: #ffffff;
    font-size: 18px;
    /* font-weight: 700; */
    background-color: var(--main-green-color);
    transition: 0.3s;
    text-decoration: none;
    /* line-height: 30px; */
}


a.btn-com::before {
    content: '';
    position: absolute;
    top: calc(64% - 2px);
    right: 1em;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 12px;
    height: 1px;
    background-color: #ffffff;
    transition: 0.3s;
}


a.btn-com::after {
    content: '';
    position: absolute;
    top: 62%;
    right: 7%;
    width: 35px;
    height: 1px;
    background-color: #ffffff;
    transition: 0.3s;
}


a.btn-com:hover {
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid var(--main-green-color);
    color: var(--main-green-color);
}


a.btn-com:hover::before, a.btn-com:hover::after {
    right: 0.5em;
    background-color: var(--main-green-color);
}


/* 小さいボタン */
a.btn-small {
    color: #fff;
    /* background-color: #3a3a3a; */
}

a.btn-small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 2rem auto 0.7rem;
    padding: 0.8em 2em 0.4rem;
    width: 280px;
    color: #494949;
    font-size: 18px;
    font-weight: 400 !important;
    /* background-color: #fff; */
    transition: 0.3s;
    border-bottom: 1px #2cad87 solid;
}

a.btn-small::before {
    content: '';
    position: absolute;
    top: calc(63% - 2px);
    right: 1em;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 12px;
    height: 1px;
    background-color: #327660;
    transition: 0.3s;
}

a.btn-small::after {
    content: '';
    position: absolute;
    top: 63%;
    right: 1em;
    transform: translateY(-50%);
    width: 50px;
    height: 1px;
    background-color: #3e836c;
    transition: 0.3s;
}

a.btn-small:hover {
    text-decoration: none;
    background-color: #ddd;
    color: #333;
}

a.btn-small:hover {
    text-decoration: none;
    background-color: #ffffff;
}

a.btn-small:hover::before, a.btn-small:hover::after {
    right: 0.5em;
}

a.btn-small-dark:hover {
background-color: #eeeeee;
}

/* メインビジュアルの動画セクション */
.video-hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  z-index: -1;
}


.video-hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: top;
}


.video-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 夏は適用 */
    /* background-color: rgb(0 0 0 / 57%); */
  z-index: 1;
}


.hero-content {
  position: relative;
  z-index: 2;
  padding: 20px;
}


/* メインビジュアルの画像セクション */
.image-gallery {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 50px;
  pointer-events: auto;
}


.image-item {
  overflow: hidden;
  opacity: 0;
  transform: scale(0.8) translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  pointer-events: auto;
  flex-shrink: 0;
  flex-grow: 0;
}


.image-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.item-1 {
  width: 80%;
  max-width: 600px;
  order: 1;
  aspect-ratio: 16 / 9;
}


.item-2 {
  width: 60%;
  max-width: 500px;
  order: 2;
  aspect-ratio: 16/9;
}


.item-3 {
  width: 50%;
  max-width: 350px;
  order: 3;
  aspect-ratio: 5 / 7;
}


@media (min-width: 769px) {
  .image-gallery {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    margin-top: 50px;
    position: relative;
  }


  .item-1 {
    width: 45%;
    position: absolute;
    top: 20px;
    left: 20px;
    /* margin-right: 5%; */
    /* margin-left: 5%; */
    /* margin-bottom: -50px; */
    margin-top: 40px;
  }


  .item-2 {
    width: 35%;
    /* margin-left: auto; */
    /* margin-left: 100px; */
    /* margin-top: 400px; */
    /* margin-bottom: -150px; */
    position: absolute;
    top: 500px;
    right: 300px;
  }


  .item-3 {
    right: 50px;
    width: 30%;
    /* margin-right: auto; */
    /* margin-left: 5%; */
    /* margin-top: 150px; */
    z-index: 4;
    position: absolute;
    top: 150px;
    left: px;
  }
}


.image-item.is-loaded {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}


/* 動画よりも上に来るコンテンツ */
.covered-content {
  position: relative;
  z-index: 0; /* 動画よりも確実に前面に表示されるように */
  background-color: #ffffff;
}


/* 背景に動画が見えるエリア */




/* 各セクションの背景 */
.owner-info-section {
    margin-top: 0;
    padding-bottom: 50px;
}

.minoto-life-section {
    background-color: var(--sub-color-02);
    margin-top: 0;
    padding-bottom: 100px;
}


.service-introduction-section {
    background-color: var(--sub-color-03);
}

section.service-introduction-section {}


.plant-calendar-section {
    background-color: var(--sub-color-01);
}


.guidance-section {
    background-color: var(--sub-color-02);
    padding-bottom: 50px;
}

/* :root {
  --main-green-color: #285b35;
  --sub-color-01: #b6b6b6;
  --sub-color-02: #e7e4de;
  --sub-color-03: #a7b4a7;
} */


/* セクション-オーナー様向け情報 */
.owner-important {
  margin:  0 auto;
  /* margin-top: 950px; */
  padding: 0 5%;
  background-color: var(--sub-color-02);
  padding-bottom: 80px;
  margin-top: 0;
}


.info-container {
  display: flex;
  /* flex-wrap: wrap; */
  gap: 40px;
  /* align-items: center; */
  justify-content: center;
  align-content: center;
  /* aspect-ratio: 16 / 9; */ /* 例: 16:9 のアスペクト比を維持 */
  /* justify-content: right; */
  margin-top: 100px;
}


.info-group {
  /* flex: 1; */
  width: 33%;
  display: flex;
  flex-direction: column;
  /* min-width: 300px; */
  object-fit: contain;
  /* margin-right: auto; */
  justify-content: right;
}


.road-info {
    /* margin-bottom: 20px; */
    /* border: 1px solid #ddd; */
    /* padding: 15px; */
    /* border-radius: 5px; */
    /* height: 300px; */
    background-color: #ffffff;
    object-fit: contain;
    width: 100%;
    max-width: 650px;
    margin-bottom: 30px;
}

.road-info-text {
    /* width: 50%; */
    padding: 0 0 10px 15px;
}

.info-area h2,
.calendar-section h2,
.road-info h3 {
  color: #333;
  /* padding: 5px 0 0 25px; */
  /* margin-top: 5px; */
  /* margin-bottom: 0; */
  width: 50%;
  min-width: 300px;
  border-bottom: 1px solid var(--main-green-color);
  margin-left: 25px;
  font-size: 22px;
  line-height: 2;
}



.road-info-content {
  display: flex;
  align-items: center;
  margin: 0 15px 15px 15px;
  gap: 15px;
}

.road-info a:hover{
    text-decoration: none;
    opacity: 0.8;
}

.road-info a{
    color: #333;
}
s

.road-info-content p {
  flex: 1;
  margin: 0;
}

.road-info-image {
    /* width: 50%; */
}

.road-info-image img {
  max-width: 200px;
  width: 100%;
  height: auto;
  display: block;
  /* border-radius: 3px; */
}


.calendar-section {
  /* flex: 1; */
  border: 1px solid #ddd;
}


#minoto-calender iframe {
  /* width: 580px; */
  /* height: 550px; */
}


@media (max-width: 1250px) {
  .info-container {
    flex-direction: column;
    /* gap: 30px; */
  }
}

@media screen and (min-width: 500px) and (max-width: 710px) {
  #minoto-calender iframe {
    width: 450px;
    height: 420px;
}
}

@media screen and (min-width: 200px) and (max-width: 500px) {
  #minoto-calender iframe {
    width: 100%;
    height: 350px;
}
}

@media (max-width: 768px) {
  .info-group {
    flex-direction: column;
    width: 100%;
  }


.owner-important {
    margin: 0 auto;
    margin-top: 0px;
    padding: 0 4%;
    padding-bottom: 60px;
    padding-top: 50px;
}

.owner-info-section {
    /* margin-top: 100vh; */
    padding-bottom: 50px;
}

.road-info-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

}


/* トップのニュースボックス */
.pagetop-info-tabs {
  /* font-family: sans-serif; */
  max-width: 650px;
  /* margin: 0 auto; */
}

.pagetop-info-tab-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin-bottom: 0px;
  border-bottom: 1px solid #63a973;
}

.pagetop-info-tab-button {
  padding: 10px 20px;
  cursor: pointer;
  background: #ffffff;
  color: #333;
  /* border: 1px solid #ccc; */
  border-bottom: none;
  margin-right: 5px;
}


.pagetop-info-tab-button.active {
  background-color: var(--main-green-color);
  color: #fff;
  /* font-weight: bold; */
  margin-right: 5px;
}

.pagetop-info-tab-content {
  /* border: 1px solid #ccc; */
  /* background: #fff; */
}

.pagetop-info-tab-panel {
  display: none;
  padding: 0;
}

.pagetop-info-tab-panel.active {
  display: block;
}

.pagetop-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagetop-info-item {
  /* border-bottom: 1px solid #ccc; */
  padding: 8px 20px 14px 20px;
  margin-bottom: 5px;
  background: #fff;
}

.pagetop-info-item:hover {
        opacity: 0.8;
}

.pagetop-info-item a:hover {
  text-decoration: none;     /* ホバー時の下線も消す */
}

.pagetop-info-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagetop-info-date {
  font-size: 15px;
  /* font-weight: bold; */
  color: #427155;
}

.pagetop-info-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pagetop-info-label {
  display: inline-block;
  font-size: 12px;
  color: #0d7351;
  background-color: #e5f1ec;
  padding: 3px 10px;
  border-radius: 30px;
}


.pagetop-info-text {
  font-size: 15px;
  color: #333;
}





/* サポートへのお問い合わせ */
.contact-container {
    display: flex;
    background-color: #ffffff;
    /* border-radius: 8px; */
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
    padding: 30px;
    max-width: 1000px;
    width: 100%;
    flex-wrap: wrap;
    gap: 30px;
    margin: 0 auto;
    margin-top: 50px;
    /* margin-bottom: 50px; */
}


.contact-card {
    display: flex;
    align-items: center;
    padding-right: 30px;
    border-right: 1px solid #e0e0e0;
    flex-shrink: 0;
}


.phone-contact .icon-wrapper {
    background-color: transparent;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-right: 20px; */
}


.phone-contact .icon-wrapper i {
    color: #3b6b64;
    font-size: 38px;
}


.phone-contact .text-content {
    text-align: left;
}


.phone-contact .support-text {
    font-size: 18px;
    color: #555;
    /* margin-bottom: 5px; */
}


.phone-contact .phone-number {
    font-size: 32px;
    font-weight: bold;
    color: #266137;
    margin-top: 0;
    margin-bottom: 10px;
    letter-spacing: 1px;
}


.phone-contact .hours,
.phone-contact .holiday {
    font-size: 16px;
    color: #777;
    margin: 0;
}


.contact-options {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    flex-grow: 1;
    gap: 15px;
    align-items: center;
}


.contact-options .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-size: 17px;
    /* font-weight: bold; */
    /* margin-bottom: 15px; */
    transition: background-color 0.3s ease;
    width: fit-content;
    min-width: 220px;
    max-height: 50px;
}


.contact-options .btn i {
    margin-right: 10px;
    font-size: 20px;
}


.contact-options .line-btn {
    background-color: #4CAF50;
    border: none;
}


.contact-options .line-btn:hover {
    background-color: #ffffff;
    color: #2fb925;
    border: 1px solid #2fb925;
}


.contact-options .mail-btn {
    background-color: #045f57;
    border: none;
}


.contact-options .mail-btn:hover {
    background-color: #ffffff;
    color: #045f57;
    border: 1px solid #045f57;
}


@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }


    .contact-card {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 20px;
        flex-direction: column;
        text-align: center;
    }


    .phone-contact .icon-wrapper {
        margin-right: 0;
        margin-bottom: 15px;
    }


    .phone-contact .text-content {
        text-align: center;
    }


    .contact-options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}


    .contact-options .btn {
        width: 100%;
        max-width: 300px;
    }

    
}

/* 記事投稿スライド */
/* 投稿記事のスライダーテスト */
.blog-slider-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 80px;
  position: relative;
  overflow: hidden;
  padding: 0;
  /* padding-bottom: 50px; */
}


.swiper-wrapper {
  /* padding: 0 5%; */
  margin-bottom: 40px;
}


.c-card2 {
  background-color: #fff;
  /* border: 1px solid #ddd; */
  box-shadow: 0.0625rem 0.0625rem 0.6rem rgb(0 0 0 / 20%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 15px;
  height: auto;
}


.c-card2__img {
  position: relative;
  width: 100%;
  padding-top: 75%;
  overflow: hidden;
  margin-bottom: 10px;
}


.c-card2__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}


.c-card2__day {
  font-size: 0.9em;
  color: #666;
  margin: 0 15px 5px;
}


.c-card2__period {
  font-size: 1.8rem;
  /* color: #4a8a6f; */
  /* border: 1px solid #4a8a6f; */
  border-radius: 3px;
  /* padding: 3px 8px; */
  display: inline-block;
  /* margin: 0 15px 10px; */
}

.c-card2__period a {
  color: #242424;
}

.c-card2__text {
  font-size: 1.5rem;
  color: #525252;
  line-height: 1.6;
      /* padding: 20px 20px 16px; */
      padding-top: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
      border-top: 1px solid #E6E6E6;
}


.c-card2-text-wrap {
      padding: 15px 20px 16px;
}


.blog-swiper-button-prev,
.blog-swiper-button-next {
  width: 40px;
  height: 40px;
  /* background-color: #575757b3; */
  background-color: var(--main-green-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 20;
  transition: background-color 0.3s ease;
}


.blog-swiper-button-prev:hover,
.blog-swiper-button-next:hover {
  background-color: #3b6d57;
}


.blog-swiper-button-prev {
  left: 0;
  transform: translateY(-50%) translateX(-50%);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}


.blog-swiper-button-next {
  right: 0;
  transform: translateY(-50%) translateX(50%);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>');
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}


.blog-swiper-pagination {
  position: absolute;
  bottom: 0;
  left: 5%;
  width: auto;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  /* padding-top: 100px !important; */
}


.swiper-pagination-bullet {
  width: 20px !important;
  height: 3px !important;
  display: inline-block;
  border-radius: 20px !important;
  background: #ccc !important;
  opacity: 1 !important;
  margin: 0 5px;
  transition: background-color 0.3s ease;
}


.swiper-pagination-bullet-active {
  background: #4a8a6f !important;
}


@media (max-width: 767px) {
  .blog-slider-container {
    padding-bottom: 40px;
  }
 
  .swiper-wrapper {
    padding: 0 5%;
  }


  .blog-swiper-button-prev,
  .blog-swiper-button-next {
    width: 30px;
    height: 30px;
    top: 35%;
  }


  .blog-swiper-button-prev {
    left: 0;
    transform: translateY(-50%) translateX(-15px);
  }


  .blog-swiper-button-next {
    right: 0;
    transform: translateY(-50%) translateX(15px);
  }


  .blog-swiper-pagination {
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
  }

  .blog-slider-container {
    margin-top: 20px;
    /* padding-top: 150px; */
}
}



/* セクション-美濃戸での生活 */
.minoto-life-section .header-image {
    width: 100%;
    height: 50vh; /* 画像の縦幅をビューポートの高さに合わせる場合は調整してください */
    /* background-image: url('../img/top/minoto-life-spring-bk.jpg');  */
    /* background-image: url('../img/top/minoto-life-summer-bk.jpg');  */
    /* background-image: url('../img/top/minoto-life-autumn-bk.jpg');  */
    background-image: url('../img/top/minoto-life-winter-bk.webp'); 
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.minoto-life-section p {
    margin-bottom: 20px;
}

.minoto-life-wrap {
    background-color: #dbd6c6;
}

.minoto-life-section .text-area {
    width: 100%;
    /* background-color: rgb(75 141 73 / 72%);  */
    /* background-color: rgba(218, 126, 90, 0.72); */
    background-color: rgb(90 111 218 / 72%);
    color: white;
    text-align: center;
    padding: 20px 0;
}


.text-area p {
    margin: 0;
    font-size: 2em;
    font-weight: bold;
}


.text-area .en {
    font-size: 1.2em;
    margin-top: 5px;
}

.section-contents {
    /* max-width: 1200px; */
    width: 100%;
    margin: 0 auto 105px;
}

.content-left {
    flex-direction: row;
    /* background: rgba(60, 31, 15, 0.06); */
    /* padding: 50px 300px; */
}

.content-right {
    flex-direction: row-reverse;
}

.content-block {
    display: flex;
    align-items: center;
    /* margin-bottom: 40px; */
    /* background-color: #ffffff; */
    /* border-radius: 8px; */
    overflow: hidden;
    padding: 100px 10%;
    /* margin-top: 80px; */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.content-block img {
    width: 65%;
    object-fit: cover;
}

.content-text {
    /* padding: 0 50px; */
    padding-left: 55px;
    width: 50%;
}

.styled-heading {
    position: relative;
    padding-left: 20px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 20px;
}

.styled-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 100%;
    background-color: #986c57;
    border-radius: 2px;
}

.styled-heading span {
    display: block;
    font-size: 22px;
}

@media (max-width: 768px) {
.content-left {
    flex-direction: column;

}

.content-block {
    padding: 30px 1%;
}

.content-text {
    /* padding: 0 50px; */
    padding-left: 0px;
    width: 100%;
}


}



/* セクション-サービス内容 */
.service-header {
    background-color: #555;
    color: white;
    text-align: center;
    padding: 40px 20px;
}


.service-header h1 {
    margin: 0;
    font-size: 2.5em;
}


.service-header .service-en {
    margin: 5px 0 0;
    font-size: 1em;
    letter-spacing: 0.1em;
}


.service-main {
    max-width: 80%;
    margin: 0 auto;
    padding: 80px 20px;
}


.intro-section {
    text-align: center;
    margin-bottom: 60px;
    font-size: 1.1em;
    line-height: 1.8;
}


.intro-section p {
    margin: 0.5em 0;
}


.service-items {
    background-color: #ffffff;
    padding: 100px 10%;
    /* border-radius: 8px; */
}


.service-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 50px;
}


.service-item:nth-child(4) {
  border-bottom: none;
      padding-bottom: 0;
}

.service-image.placeholder {
    /* background-color: #4a4a4a; */
    min-height: 200px;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0.0625rem 0.0625rem 0.6rem rgb(0 0 0 / 20%);
}


.service-description {
    flex-grow: 1;
}


.service-number {
    font-size: 65px;
    color: #888;
    margin-bottom: 0;
}


.service-title {
    font-size: 18px;
    /* height: 40px; */
    margin: 0 0 20px;
    color: #ffffff;
    background-color: var(--main-green-color);
    /* border: 1px solid var(--main-green-color); */
    border-radius: 60px;
    /* width: auto; */
    max-width: max-content;
    padding: 3px 25px;
    text-align: center;
}

h2.service-title {}


.service-text {
    /* font-size: 1em; */
    /* margin: 0 0 10px; */
}


/* レスポンシブ対応 */
@media (min-width: 768px) {
    .service-item {
        flex-direction: row;
        align-items: flex-start;
    }


    .service-image.placeholder {
        min-height: 150px;
        width: 60%;
        margin-right: 30px;
        margin-bottom: 0;
    }


    .service-description {
        width: 70%;
    }
}


/* 7月29日追加 */
.mg-container {
  max-width: 1200px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  margin-top: 80px;
}

.mg-container {}

.mg-heading {
  margin-bottom: 40px;
  line-height: 1.6;
}

.mg-image-gallery {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}

.mg-gallery-item {
  flex: 1;
  min-width: 280px;
  max-width: 350px;
  text-align: left;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.mg-gallery-item.is-visible {
  opacity: 1;
  transform: scale(1);
}

.mg-image-wrapper {
 position: relative;
 width: 100%;
 padding-bottom: 100%; /* 正方形にする */
 overflow: hidden;
 margin-bottom: 15px;
 box-sizing: border-box; /* paddingとborderを要素の内側に含める */
}

.mg-image-wrapper::before {
 content: '';
 position: absolute;
 top: 5px;
 left: 5px;
 /* width: 100%; */
 height: calc(100% - 10px);
 width: calc(100% - 10px);
 /* height: 100%; */
 background-color: rgb(74 74 74 / 45%); /* 黒い半透明フィルター */
 z-index: 1;
}

.mg-image-wrapper img {
 position: absolute;
 /* top: 10px; */ /* 内側にずらす */
 /* left: 10px; */ /* 内側にずらす */
 /* width: calc(100% - 10px); */ /* 白枠の分だけ縮小 */
 /* height: calc(100% - 10px); */ /* 白枠の分だけ縮小 */
 object-fit: cover;
 display: block;
 /* border: 2px solid #fff; */ /* 白い枠 */
}



.mg-text-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mg-text-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 8px;
  line-height: 1.5;
  font-size: 15px;
}

.mg-text-list li::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%232e8b57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-8.08"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.mg-more-button h3 {
  color: #767676;
}

.mg-more-button p {
  font-size: 18px;
  margin-bottom: 15px;
}

.mg-button {
  display: inline-block;
  padding: 10px 25px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.mg-button:hover {
  background-color: #45a049;
}

@media (max-width: 768px) {
  .mg-image-gallery {
    flex-direction: column;
    align-items: center;
  }

  .mg-gallery-item {
    max-width: 200px; /* 小さい画面での最大幅調整 */
    width: 100%;
  }

  .service-main {
    min-width: 100%;
    padding: 80px 20px;padding: 20px 15px;}

.service-items {
    background-color: #ffffff;
    padding: 40px 4%;
    /* border-radius: 8px; */
}

a.btn-com {
    margin-top: 10px;
    padding: 0.8rem 2rem 0.8rem;
    width: 250px;
    font-size: 16px;
}
}



/* セクション-高山植物カレンダー */
.text-content h3.with-icon {
    background-image: url('../img/top/flower-icon.svg'); /* SVGファイルのパスを指定 */
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px 20px;
    padding-left: 30px; /* アイコン分の余白を確保 */
    margin: 0; /* h3のデフォルトマージンを調整 */
}

.calendar-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 130px;
}

.calendar-header {
    text-align: center;
    /* margin-bottom: 60px; */
    padding: 20px;
}

.calendar-header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #4CAF50;
}

.calendar-header .plant-description {
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

.timeline {
    position: relative;
    padding: 50px 0;
}

.timeline-line {
    position: absolute;
    width: 2px;
    background-color: #ffffff;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    /* padding-top: 50px; */
    margin-top: 50px;
}

.timeline-item {
    display: block; /* 複数のbubbleを自由に配置するためblockに変更 */
    position: relative;
    /* margin-bottomは月ごとのmin-heightと合わせて調整 */
}

.month-circle {
    width: 80px;
    height: 80px;
    background-color: var(--main-green-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.small-circle {
    width: 20px;
    height: 20px;
     background-color: var(--sub-color-03);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}

.bubble {
    background-color: white;
    /* border-radius: 10px; */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: absolute; /* absoluteで個別に配置 */
    width: 45%;
    height: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.bubble.visible {
    opacity: 1;
    transform: translateY(0);
}

.bubble-content {
    display: flex;
    align-items: center;
}

.image-wrapper {
    flex-shrink: 0;
    width: 41%;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.text-content {
    flex-grow: 1;
    padding: 0 15px;
}

.text-content h3 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #555;
    font-size: 1.3em;
}

.text-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

/* 吹き出しの三角部分 */
.bubble::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* --- PC版: 吹き出しの左右配置と三角の向き --- */
.bubble-align-left {
    left: px;
    right: auto;
}
.bubble-align-left::before {
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent white;
    right: -15px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}
.small-circle.bubble-align-left {
    left: calc(50% - 10px); /* 線の左側 */
    right: auto;
}

.bubble-align-right {
    right: 0;
    left: auto;
}
.bubble-align-right::before {
    border-width: 15px 15px 15px 0;
    border-color: transparent white transparent transparent;
    left: -15px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
}
.small-circle.bubble-align-right {
    right: calc(50% - 10px); /* 線の右側 */
    left: auto;
}


/* --- PC版: 各月のコンテンツの縦方向配置 --- */

/* 5月（2個） */
.timeline-item[data-month="5"] .month-circle {top: -50px;}
.timeline-item[data-month="5"] .bubble-1 {top: 20px;}
.timeline-item[data-month="5"] .small-circle-1 {top: 110px;} /* 吹き出しの中心に合わせる */
.timeline-item[data-month="5"] .bubble-2 {top: 150px;} /* 1つ目の吹き出しの下に配置 */
.timeline-item[data-month="5"] .small-circle-2 {top: 240px;}

/* 6月（2個） */
.timeline-item[data-month="6"] .month-circle { top: 0; }
.timeline-item[data-month="6"] .bubble-1 {top: 20px;}
.timeline-item[data-month="6"] .small-circle-1 {top: 110px;}
.timeline-item[data-month="6"] .bubble-2 { top: 150px; }
.timeline-item[data-month="6"] .small-circle-2 {top: 240px;}

/* 7月（3個） */
.timeline-item[data-month="7"] .month-circle { top: 0; }
.timeline-item[data-month="7"] .bubble-1 {top: 20px;}
.timeline-item[data-month="7"] .small-circle-1 {top: 110px;}
.timeline-item[data-month="7"] .bubble-2 { top: 150px; }
.timeline-item[data-month="7"] .small-circle-2 {top: 240px;}
.timeline-item[data-month="7"] .bubble-3 { top: 300px; } /* 2つ目の吹き出しの下に配置 */
.timeline-item[data-month="7"] .small-circle-3 {top: 390px;}

/* 8月（3個） */
.timeline-item[data-month="8"] .month-circle { top: 0; }
.timeline-item[data-month="8"] .bubble-1 { top: 0; }
.timeline-item[data-month="8"] .small-circle-1 { top: 40px; }
.timeline-item[data-month="8"] .bubble-2 {top: 20px;}
.timeline-item[data-month="8"] .small-circle-2 {top: 110px;}
.timeline-item[data-month="8"] .bubble-3 {top: 120px;}
.timeline-item[data-month="8"] .small-circle-3 {top: 210px;}


/* 月と月との間隔を調整するためのmin-heightとmargin-bottom */
/* 各月のコンテンツが収まる最小高さを考慮して設定 */
.timeline-item[data-month="5"] { min-height: 250px; margin-bottom: 50px; }
.timeline-item[data-month="6"] { min-height: 250px; margin-bottom: 50px; }
.timeline-item[data-month="7"] {min-height: 250px;margin-bottom: 50px;}
.timeline-item[data-month="8"] {min-height: 250px;margin-bottom: 50px;}


/* --- タブレットより小さい画面での表示 (max-width: 768pxを仮定) --- */
@media (max-width: 768px) {
    .timeline-line {
        left: 50px;
        transform: translateX(0);
        height: 2295px;
    }

    /* モバイル表示では、すべての吹き出しを左側の線に揃えて右側に配置 */
    .month-circle {
        left: 20px;
        transform: translateX(0);
        width: 60px;
        height: 60px;
        font-size: 1.2em;
    }

    .small-circle {
        left: 41px !important; /* 線から少し離れた位置 */
        right: auto; /* PC版の右寄せ設定をリセット */
        transform: translateX(0);
    }

    .bubble {
        width: calc(100% - 115px); /* 左側の線と月のスペースを考慮 */
        left: 100px; /* 線と月の右側に配置 */
        right: auto; /* PC版の右寄せ設定をリセット */
        padding: 15px 10px;
    }

    /* モバイル版の吹き出しの三角は全て左向き */
    .bubble-align-left::before,
    .bubble-align-right::before {
        border-width: 15px 15px 15px 0;
        border-color: transparent white transparent transparent;
        left: -15px;
        right: auto;
        top: 50%;
        transform: translateY(-50%);
    }

    .bubble-content {
        flex-direction: column;
    }

    .text-content h3 {
        display: flex;
        align-items: center;
        /* 例: 花のアイコンを挿入する場合のスタイル */
        /* &::before { content: ''; display: inline-block; width: 20px; height: 20px; background-image: url('path/to/flower-icon.png'); background-size: contain; margin-right: 5px; } */
    }

    /* --- スマホ版: 各月のコンテンツの縦方向配置（PC版とほぼ同じ値でOKなはず） --- */
    /* 5月（2個） */
    .timeline-item[data-month="5"] .month-circle {/* top: -40px; *//* left: -10px; */}
    .timeline-item[data-month="5"] .bubble-1 {top: -47px;}
    .timeline-item[data-month="5"] .small-circle-1 {top: 90px;}
    .timeline-item[data-month="5"] .bubble-2 {top: 270px;}
    .timeline-item[data-month="5"] .small-circle-2 {top: 395px;}

    /* 6月（2個） */
    .timeline-item[data-month="6"] .month-circle {top: 242px;}
    .timeline-item[data-month="6"] .bubble-1 {top: 285px;}
    .timeline-item[data-month="6"] .small-circle-1 {top: 705px;}
    .timeline-item[data-month="6"] .bubble-2 {top: 580px;}
    .timeline-item[data-month="6"] .small-circle-2 {top: 412px;}

    /* 7月（3個） */
    .timeline-item[data-month="7"] .month-circle {top: 551px;}
    .timeline-item[data-month="7"] .bubble-1 {top: 595px;}
    .timeline-item[data-month="7"] .small-circle-1 {top: 722px;}
    .timeline-item[data-month="7"] .bubble-2 {top: 890px;}
    .timeline-item[data-month="7"] .small-circle-2 {top: 1028px;}
    .timeline-item[data-month="7"] .bubble-3 { top: 300px; }
    .timeline-item[data-month="7"] .small-circle-3 { top: 340px; }

    /* 8月（3個） */
    .timeline-item[data-month="8"] .month-circle {top: 735px;}
    .timeline-item[data-month="8"] .bubble-1 { top: 0; }
    .timeline-item[data-month="8"] .small-circle-1 { top: 40px; }
    .timeline-item[data-month="8"] .bubble-2 {top: 780px;}
    .timeline-item[data-month="8"] .small-circle-2 {top: 907px;}
    .timeline-item[data-month="8"] .bubble-3 {top: 1075px;}
    .timeline-item[data-month="8"] .small-circle-3 {top: 1200px;}

    /* 9月（3個） */
    .timeline-item[data-month="9"] .month-circle {top: 860px;}
    .timeline-item[data-month="9"] .bubble-1 { top: 0; }
    .timeline-item[data-month="9"] .small-circle-1 { top: 40px; }
    .timeline-item[data-month="9"] .bubble-2 { top: 150px; }
    .timeline-item[data-month="9"] .small-circle-2 { top: 190px; }
    .timeline-item[data-month="9"] .bubble-3 { top: 300px; }
    .timeline-item[data-month="9"] .small-circle-3 { top: 340px; }


    /* 月と月との間隔を調整 */
    .timeline-item[data-month="5"] { min-height: 250px; margin-bottom: 30px; }
    .timeline-item[data-month="6"] { min-height: 250px; margin-bottom: 30px; }
    .timeline-item[data-month="7"] { min-height: 400px; margin-bottom: 30px; }
    .timeline-item[data-month="8"] { min-height: 400px; margin-bottom: 30px; }
    .timeline-item[data-month="9"] { min-height: 400px; margin-bottom: 30px; }
}

/* XR */
/* --- タブレットより小さい画面での表示 (max-width: 768pxを仮定) --- */
@media (min-width: 412px) and (max-width: 425px) {
    .timeline-line {
        left: 50px;
        transform: translateX(0);
        height: 2295px;
    }

    /* モバイル表示では、すべての吹き出しを左側の線に揃えて右側に配置 */
    .month-circle {
        left: 20px;
        transform: translateX(0);
        width: 60px;
        height: 60px;
        font-size: 1.2em;
    }

    .small-circle {
        left: 41px !important; /* 線から少し離れた位置 */
        right: auto; /* PC版の右寄せ設定をリセット */
        transform: translateX(0);
    }

    .bubble {
        width: calc(100% - 115px); /* 左側の線と月のスペースを考慮 */
        left: 100px; /* 線と月の右側に配置 */
        right: auto; /* PC版の右寄せ設定をリセット */
        padding: 15px 10px;
    }

    /* モバイル版の吹き出しの三角は全て左向き */
    .bubble-align-left::before,
    .bubble-align-right::before {
        border-width: 15px 15px 15px 0;
        border-color: transparent white transparent transparent;
        left: -15px;
        right: auto;
        top: 50%;
        transform: translateY(-50%);
    }

    .bubble-content {
        flex-direction: column;
    }

    .text-content h3 {
        display: flex;
        align-items: center;
        /* 例: 花のアイコンを挿入する場合のスタイル */
        /* &::before { content: ''; display: inline-block; width: 20px; height: 20px; background-image: url('path/to/flower-icon.png'); background-size: contain; margin-right: 5px; } */
    }

    /* --- スマホ版: 各月のコンテンツの縦方向配置（PC版とほぼ同じ値でOKなはず） --- */
    /* 5月（2個） */
    .timeline-item[data-month="5"] .month-circle {/* top: -40px; *//* left: -10px; */}
    .timeline-item[data-month="5"] .bubble-1 {top: -47px;}
    .timeline-item[data-month="5"] .small-circle-1 {top: 90px;}
    .timeline-item[data-month="5"] .bubble-2 {top: 260px;}
    .timeline-item[data-month="5"] .small-circle-2 {top: 395px;}

    /* 6月（2個） */
    .timeline-item[data-month="6"] .month-circle {top: 242px;}
    .timeline-item[data-month="6"] .bubble-1 {top: 278px;}
    .timeline-item[data-month="6"] .small-circle-1 {top: 715px;}
    .timeline-item[data-month="6"] .bubble-2 {top: 580px;}
    .timeline-item[data-month="6"] .small-circle-2 {top: 412px;}

    /* 7月（3個） */
    .timeline-item[data-month="7"] .month-circle {top: 551px;}
    .timeline-item[data-month="7"] .bubble-1 {top: 595px;}
    .timeline-item[data-month="7"] .small-circle-1 {top: 730px;}
    .timeline-item[data-month="7"] .bubble-2 {top: 890px;}
    .timeline-item[data-month="7"] .small-circle-2 {top: 1025px;}
    .timeline-item[data-month="7"] .bubble-3 { top: 300px; }
    .timeline-item[data-month="7"] .small-circle-3 { top: 340px; }

    /* 8月（3個） */
    .timeline-item[data-month="8"] .month-circle {top: 735px;}
    .timeline-item[data-month="8"] .bubble-1 { top: 0; }
    .timeline-item[data-month="8"] .small-circle-1 { top: 40px; }
    .timeline-item[data-month="8"] .bubble-2 {top: 773px;}
    .timeline-item[data-month="8"] .small-circle-2 {top: 907px;}
    .timeline-item[data-month="8"] .bubble-3 {top: 1075px;}
    .timeline-item[data-month="8"] .small-circle-3 {top: 1210px;}

    /* 9月（3個） */
    .timeline-item[data-month="9"] .month-circle {top: 860px;}
    .timeline-item[data-month="9"] .bubble-1 { top: 0; }
    .timeline-item[data-month="9"] .small-circle-1 { top: 40px; }
    .timeline-item[data-month="9"] .bubble-2 { top: 150px; }
    .timeline-item[data-month="9"] .small-circle-2 { top: 190px; }
    .timeline-item[data-month="9"] .bubble-3 { top: 300px; }
    .timeline-item[data-month="9"] .small-circle-3 { top: 340px; }


    /* 月と月との間隔を調整 */
    .timeline-item[data-month="5"] { min-height: 250px; margin-bottom: 30px; }
    .timeline-item[data-month="6"] { min-height: 250px; margin-bottom: 30px; }
    .timeline-item[data-month="7"] { min-height: 400px; margin-bottom: 30px; }
    .timeline-item[data-month="8"] { min-height: 400px; margin-bottom: 30px; }
    .timeline-item[data-month="9"] { min-height: 400px; margin-bottom: 30px; }

    .calendar-container {
    padding-bottom: 540px;
}
}

/* 14pro-Max */
/* XR */
/* --- タブレットより小さい画面での表示 (max-width: 768pxを仮定) --- */
@media (min-width: 425px) and (max-width: 768px) {
    .timeline-line {
        left: 50px;
        transform: translateX(0);
        height: 2295px;
    }

    /* モバイル表示では、すべての吹き出しを左側の線に揃えて右側に配置 */
    .month-circle {
        left: 20px;
        transform: translateX(0);
        width: 60px;
        height: 60px;
        font-size: 1.2em;
    }

    .small-circle {
        left: 41px !important; /* 線から少し離れた位置 */
        right: auto; /* PC版の右寄せ設定をリセット */
        transform: translateX(0);
    }

    .bubble {
        width: calc(100% - 115px); /* 左側の線と月のスペースを考慮 */
        left: 100px; /* 線と月の右側に配置 */
        right: auto; /* PC版の右寄せ設定をリセット */
        padding: 15px 10px;
    }

    /* モバイル版の吹き出しの三角は全て左向き */
    .bubble-align-left::before,
    .bubble-align-right::before {
        border-width: 15px 15px 15px 0;
        border-color: transparent white transparent transparent;
        left: -15px;
        right: auto;
        top: 50%;
        transform: translateY(-50%);
    }

    .bubble-content {
        flex-direction: column;
    }

    .text-content h3 {
        display: flex;
        align-items: center;
        /* 例: 花のアイコンを挿入する場合のスタイル */
        /* &::before { content: ''; display: inline-block; width: 20px; height: 20px; background-image: url('path/to/flower-icon.png'); background-size: contain; margin-right: 5px; } */
    }

    /* --- スマホ版: 各月のコンテンツの縦方向配置（PC版とほぼ同じ値でOKなはず） --- */
    /* 5月（2個） */
    .timeline-item[data-month="5"] .month-circle {/* top: -40px; *//* left: -10px; */}
    .timeline-item[data-month="5"] .bubble-1 {top: -72px;}
    .timeline-item[data-month="5"] .small-circle-1 {top: 70px;}
    .timeline-item[data-month="5"] .bubble-2 {top: 240px;}
    .timeline-item[data-month="5"] .small-circle-2 {top: 380px;}

    /* 6月（2個） */
    .timeline-item[data-month="6"] .month-circle {top: 242px;}
    .timeline-item[data-month="6"] .bubble-1 {top: 270px;}
    .timeline-item[data-month="6"] .small-circle-1 {top: 720px;}
    .timeline-item[data-month="6"] .bubble-2 {top: 580px;}
    .timeline-item[data-month="6"] .small-circle-2 {top: 412px;}

    /* 7月（3個） */
    .timeline-item[data-month="7"] .month-circle {top: 551px;}
    .timeline-item[data-month="7"] .bubble-1 {top: 620px;}
    .timeline-item[data-month="7"] .small-circle-1 {top: 760px;}
    .timeline-item[data-month="7"] .bubble-2 {top: 930px;}
    .timeline-item[data-month="7"] .small-circle-2 {top: 1070px;}
    .timeline-item[data-month="7"] .bubble-3 { top: 300px; }
    .timeline-item[data-month="7"] .small-circle-3 { top: 340px; }

    /* 8月（3個） */
    .timeline-item[data-month="8"] .month-circle {top: 735px;}
    .timeline-item[data-month="8"] .bubble-1 { top: 0; }
    .timeline-item[data-month="8"] .small-circle-1 { top: 40px; }
    .timeline-item[data-month="8"] .bubble-2 {top: 810px;}
    .timeline-item[data-month="8"] .small-circle-2 {top: 950px;}
    .timeline-item[data-month="8"] .bubble-3 {top: 1120px;}
    .timeline-item[data-month="8"] .small-circle-3 {top: 1258px;}

    /* 9月（3個） */
    .timeline-item[data-month="9"] .month-circle {top: 860px;}
    .timeline-item[data-month="9"] .bubble-1 { top: 0; }
    .timeline-item[data-month="9"] .small-circle-1 { top: 40px; }
    .timeline-item[data-month="9"] .bubble-2 { top: 150px; }
    .timeline-item[data-month="9"] .small-circle-2 { top: 190px; }
    .timeline-item[data-month="9"] .bubble-3 { top: 300px; }
    .timeline-item[data-month="9"] .small-circle-3 { top: 340px; }


    /* 月と月との間隔を調整 */
    .timeline-item[data-month="5"] { min-height: 250px; margin-bottom: 30px; }
    .timeline-item[data-month="6"] { min-height: 250px; margin-bottom: 30px; }
    .timeline-item[data-month="7"] { min-height: 400px; margin-bottom: 30px; }
    .timeline-item[data-month="8"] { min-height: 400px; margin-bottom: 30px; }
    .timeline-item[data-month="9"] { min-height: 400px; margin-bottom: 30px; }

        .calendar-container {
    padding-bottom: 540px;
}
}


/* セクション-案内 */
.guid-list-item:hover {
text-decoration: none;
/* opacity: 0.8; */
background-color: #d2ccc4;
}

.guidance-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.guid-content-list {
    width: 100%;
    max-width: 600px;
    /* background-color: #e5e0dc; */
    padding: 0 20px;
    box-sizing: border-box;
    flex: 1;
}

.guid-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #c0c0c0;
    text-decoration: none;
    color: inherit;
}

.guid-list-item:last-child {
    border-bottom: none;
}

.guid-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 20px;
}

.guid-english-text {
    font-size: 1.5rem;
    color: #000000;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.guid-japanese-text {
    font-size: 2.5rem;
    color: #333;
}

.guid-arrow-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-right: 10px;
}


.guid-img-image-container {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
    gap: 20px;
    /* width: 100%; */
    padding: 20px;
    box-sizing: border-box;
    flex: 1;
    max-width: 40%;
}

.guid-img-image-item {
    background-color: #4a4542;
    /* flex: 1; */
    /* min-width: 280px; */
    /* max-width: 40%; */
    aspect-ratio: 0.75 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* color: #c0c0c0; */
    /* font-size: 1.5em; */
    /* position: relative; */
    /* overflow: hidden; */
}

.guid-img-image-item img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* opacity: 0; */
}

/* タブレットより小さい画面で縦並びにする */
@media (max-width: 768px) {
  .guidance-flex {
  display: flex;
  flex-direction: column;
}

    .guid-img-image-container {
        /* flex-direction: column; */
        align-items: center;
    }

    .guid-img-image-item {
        max-width: 90%;
        width: 100%;
    }
}







.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: '' !important;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after
 {
    content: '' !important;
}


.swiper-button-next,.swiper-button-prev {
    top: var(--swiper-navigation-top-offset,45%) !important;
    width: calc(var(--swiper-navigation-size)/ 50 * 50) !important;
}

.swiper-button-prev,.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset,30px) !important;
}

.swiper-button-next,.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset,30px) !important;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
.subtext-wrapper {
    margin: 0 auto;
    text-align: left;
    width: 300px;
    /* margin-bottom: 20px; */
}

.calendar-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 500px;
}


.image-wrapper {
    flex-shrink: 0;
    width: 70%;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
}

.guid-img-image-container {
    max-width: 100%;
}

.section-tit-text {
    text-align: left;
    padding: 20px 30px !important;
}

.minoto-life-section p {
    margin-bottom: 20px;
    padding: 20px 30px;
}

.content-block img {
    width: 100%;
    object-fit: cover;
    padding: 20px 18px;
}


.section-tit-wrap {
    padding-top: 0px;
    /* min-width: 350px; */
}

.info-container {margin-top: 40px;}

section.service-introduction-section {
padding-top: 50px;
}

.plant-calendar-section {
   padding-top: 50px;
}

.guidance-section {
padding-top: 50px;
}

.content-right {
    flex-direction: column;
}

.sub-heading-comment {
    text-align: left;
    padding: 0 20px;
}

.hero-content h1 {
  font-size: 22px;
}

.hero-content span {
  font-size: 16px;
}

.guid-japanese-text {
    font-size: 2rem;
    color: #333;
}
}

.swiper-button-next, .swiper-button-prev {
    svg {
        display: none;
    }
}

.tit-white {
    color: #ffffff;
}

@media (max-width: 768px) {
.service-number {
    font-size: 55px;
}

.if-pc {
    display: none;
}

.contact-container {
    gap: 0px;
}

.phone-contact .support-text {
    font-size: 1.8rem;
}

.contact-options {
    gap: 0px;
}

.flower-slider-wrapper img.horizontal {
    height: 180px;
    width: auto;
}

.flower-slider-wrapper img.vertical-large {
    height: 250px;
}

.minoto-life-section {
    padding-bottom: 50px;
}

.section-contents {
    /* max-width: 1200px; */
    width: 100%;
    margin: 0 auto 50px;
}

.main-inner{
    overflow: hidden;
    padding-top: 50px;
}

#minoto-calender {
    margin-top: 30px;
}
}

.phone-number a {
  color: var(--mail-button-color);
}

.no-border:hover, .no-border:focus {
    border-bottom: none;
}

@media (min-width: 768px) {
.if-sp {
    display: none;
}
}

@keyframes mainHeroSlideFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  42%  { opacity: 1; }
  58%  { opacity: 0; }
  100% { opacity: 0; }
}

.is-pc {
    padding-top: 80px;
    max-width :600px;
  }

  @media screen and (max-width: 789px) {
    .is-pc {
        padding-top: 0;
        max-width: 100%;
        padding-bottom: 50px;
}
}