/*  - 1249px */
@media screen and (min-width:280px) and (max-width:1249px) {
    #header .phone {
        display: none;
    }
}

/* - 999px */
@media screen and (min-width:280px) and (max-width:999px) {
    #header .header-left {
        display: flex;
        align-items: center;
    }
    h1 {
        display: none;
    }
    .child.grave .container.wide {
        flex-direction: column;
    }
    .child.grave .contents.gardening {
        width: 100%;
        max-width: 800px;
    }
    #garden-wrapper {
        margin: 40px auto;
    }
    .child .bg-bubble {
        height: 140%;
    }
}

/* - 767px */
@media screen and (min-width:280px) and (max-width:767px) {
    .pc-only {
        display: none;
    }
    .sp-only {
        display: block;
    }

    #header {
        height: 70px;
    }
    #header .header-inner {
        height: 70px;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    #header .header-logo {
        width: calc(((260 / 367)* 100) * 1vw);
        max-width: 330px;
        padding: 0 10px 0 0;
    }    
    #header .header-right {
        column-gap: 0;
    }    
    #header .request {
        display: none;
    }

    .openbtn {
        width: 70px;
        height: 70px;
    }
    .openbtn span {
        width: 32px;
    }
    .openbtn span:nth-of-type(1) {
        top: 21px;
        left: 19px;
    }
    .openbtn span:nth-of-type(2) {
        top: 35px;
        left: 19px;
    }
    .openbtn span:nth-of-type(3) {
        top: 49px;
        left: 19px;
    }
    .openbtn.active span:nth-of-type(1) {
        top: 24px;
        left: 19px;
        background: #fff;
    }
    .openbtn.active span:nth-of-type(3) {
        top: 36px;
        left: 19px;
        background: #fff;
    }


    /*-- footer --*/
    .footer {
        width: 100%;
        padding: 40px 20px 0;
        background-size: cover;
        background-position: center bottom;
    }
    .footer-container {
        padding-bottom: 40px;
        flex-direction: column;
        align-items: center;
    }
    .footer-inner {
        flex-direction: column;
        margin: 30px auto 0;
        gap: 20px;
    }
    .copyright {
        padding: 22px 10px 160px;
    }
    

    .wrapper {
        padding: 60px 20px;
    }

    .petal {
        height: 70vh;
    }
    


    /*-- index --*/
    .topmain {
        height: calc((261 / 367) * 100vw);
        margin-top: 70px;
    }
    .topmain-bg {
        background-image: url(../images/bg_index_sp01.jpg);
    }
    .topmain picture {
        width: 80%;
    }

    #index .first {
        padding: 40px 20px;
        background-image: url(../images/bg_index_sp02.jpg), url(../images/bg_index_sp03.png);
        background-position: center top, center bottom;
        background-size: auto contain;
    }
    #index .title {
        font-size: clamp(2rem, 5.44vw, 2.6rem);
    }
    #index .plans {
        flex-direction: column;
        gap: 20px;
        margin: 20px auto 0;
    }
    #index .sub-name {
        font-size: clamp(1.5rem, 4.19vw, 2rem);
        padding: 8px 0;
    }
    #index .container {
        padding: 20px 10px;
    }
    #index .main-name {
        font-size: clamp(2.1rem, 6.28vw, 3rem);
    }
    #index .plan-image {
        margin: 14px auto 0;
    }
    #index .plan-name {
        font-size: clamp(1.5rem, 3.98vw, 1.9rem);
        margin-top: 18px;
    }
    #index .price {
        font-size: clamp(1.3rem, 3.35vw, 1.6rem);
        margin: 12px auto 0;
    }
    #index span.big {
        font-size: clamp(2.2rem, 5.86vw, 2.8rem);
    }
    #index .descs {
        margin: 14px auto 0;
        padding-top: 14px;
    }    
    #index .plan-desc {
        font-size: clamp(1.3rem, 3.35vw, 1.6rem);
        padding-left: clamp(17px, 4.8vw, 23px);
    }
    #index .btn-container {
        width: 100%;
        max-width: 360px;    
        margin: 16px auto 0;
        padding: 16px 10px;
    }
    #index .btn {
        font-size: clamp(1.3rem, 3.35vw, 1.6rem);
    }
    #index .plan-big {
        margin: 40px auto 0;
        padding: clamp(32px, 8.8vw, 42px) clamp(15px, 4.19vw, 20px);
    }
    #index .speech {
        font-size: clamp(2rem, 5.44vw, 2.6rem);
        line-height: 1.35;
    }
    #index .speech span {
        width: clamp(32px, 8.8vw, 42px);
        height: clamp(33px, 9.2vw, 44px);
        font-size: clamp(2.3rem, 6.49vw, 3.1rem);
        margin-top: 8px;
    }
    #index .inner {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    #index .inner-image {
        max-width: 100%;
    }
    #index .inner-right {
        max-width: 100%;
    }
    #index .content {
        font-size: clamp(1.3rem, 3.35vw, 1.6rem);
    }
    #index .second {
        padding: 40px 20px;
    }
    #index .main-content {
        font-size: clamp(1.3rem, 3.35vw, 1.6rem);
        margin: 30px auto 0;
    }
    #index .image-container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        margin: 30px auto 0;
    }
    #index .second .btn-container {
        margin-top: 24px;
    }
    
    #index .news {
        padding: 40px 20px;
        background-position: center 70px;
    }
    #index .news-bg {
        background-image: url("../images/bg_index_sp03.jpg");
    }
    
    #index .news-container {
        padding: 30px 20px 40px;
    }
    #index .news .title {
        font-size: clamp(2rem, 5.44vw, 2.6rem);
    }
    #index .news dl {
        padding-bottom: 32px;
    }
    #index .news-title {
        font-size: clamp(1.5rem, 4.19vw, 2rem);
        padding: 0 10px;
        margin-top: 24px;
    }
    #index .news-date {
        padding: 0 10px;
    }
    #index .news-content {
        font-size: clamp(1.3rem, 3.35vw, 1.6rem);
        padding: 0 10px;
    }
    
    /* cta-section */
    .cta {
        width: 100%;
        padding: 40px 20px;
    }
    .cta-title {
        font-size: clamp(1.8rem, 5vw, 2.4rem);
    }
    .cta-cards {
        margin: 30px auto 0;
        flex-wrap: wrap;
        align-items: center;
        gap: 20px;
    }
    .cta-card {
        padding: 20px 16px;
    }
    .cta-card-title {
        font-size: clamp(1.4rem, 3.77vw, 1.8rem);
        margin-top: 20px;
    }
    .cta-content {
        margin-top: 12px;
    }

    /*-- cattleya --*/
    /*-- eitaibo --*/
    /*-- goshibo --*/
    /*-- feature --*/
    /*-- access --*/
    /*-- inquiry --*/

    .fv {
        height: calc((261 / 367) * 100vw);
        margin-top: 70px;
    }
    .child .wrapper {
        padding: clamp(48px, 6.25vw, 90px) 0 clamp(80px, 6.94vw, 100px);
        margin-top: clamp(-290px, -38vw, -140px);
        border-radius: 60px 60px 0 0;
    }
    .child .title {
        font-size: clamp(2.6rem, 7.12vw, 3.4rem);
    }
    .child .container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        gap: 20px;
        margin-top: clamp(40px, 7.84vw, 113px);
    }
    .child .contents {
        padding-left: clamp(20px, 4.16vw, 60px);
        padding-right: clamp(20px, 4.16vw, 60px);
    }
    .child .content-title {
        font-size: clamp(2rem, 5.44vw, 2.6rem);
    }
    .child .content {
        font-size: clamp(1.3rem, 3.35vw, 1.6rem);
        margin-top: 20px;
    }
    .child .image-box {
        padding-left: clamp(20px, 4.16vw, 60px);
    }
    .slides {
        margin-top: 40px;        
    }
    .swiper-slide {
        width: 66.6vw;
    }

    .child .container.wide {
        column-gap: clamp(25px, 7.81vw, 60px);
        margin-top: 60px;
        flex-direction: column;
        align-items: flex-end;
    }
    .child .container.middle {
        flex-direction: column;
        padding: clamp(20px, 6.66vw, 96px) 0 clamp(20px, 6.66vw, 96px) clamp(20px, 4.16vw, 60px);
        max-height: auto;
        margin-top: 20px;
    }
    .child .container.full {
        margin-top: 60px;
        flex-direction: column;
    }
    .child .container.full .contents {
        max-width: 100%;
        padding: 0 20px;
    }
    .child.inquiry .wrap {
        margin: 40px auto 0;
    }    
    .child .container.grid {
        margin: 20px auto 0;
        grid-template-columns: 1fr; 
    }
    .child .container.grid .image-box {
        padding: 0;
    }
    .child .bg-gardening {
        width: 100%;
        height: 67.46vw;
        background-size: contain;
    }
    .child .contents.gardening {
        padding: clamp(48px, 4.16vw, 60px) clamp(48px, 4.16vw, 60px) 0 20px;
    }
    .child.feature .contents.gardening {
        display: flex;
        gap: 60px;
        flex-direction: column;
        align-items: flex-end;
        gap: 20px;
        padding: 0 60px 20px clamp(25px, 7.81vw, 60px);
    }
    .child .profiles {
        width: 100%;
    }
    .child .profile-title {
        font-size: clamp(1.6rem, 2.34vw, 1.8rem);
        text-align: end;
    }    
    .child .profile-content {
        font-size: clamp(1.4rem, 2.08vw, 1.6rem);
        height: 200px;
        margin-top: 20px;
    }    
    .child .labels {
        margin-top: 20px;
    }
    .child .image-box.gardening {
        width: clamp(204px, 63.8vw, 490px);
        padding: 20px clamp(48px, 4.16vw, 60px) 20px 0;
    }
    .child .image-box.feature {
        width: 46%;
        max-width: 240px;
        height: auto;
        margin-top: -20px;
    }    
    .child .container.flex {
        margin: 40px auto 0;
        flex-direction: column;
    }
    .child .container.flex.bd-none {
        border-bottom: 0;
    }
    .child .container.flex .contents {
        min-width: 280px;
        padding: 0 0 0 clamp(10px, 3.26vw, 47px);
    }
    .child .outer {
        padding: clamp(36px, 15.92vw, 108px) 0 clamp(33px, 14.8vw, 100px);
        margin: clamp(50px, 15.625vw, 150px) auto 0;
    }
    .child .outer::after {
        width: clamp(40px, 12.5vw, 116px);
        height: clamp(48px, 15vw, 145px);
    }
    .child .bg-bubble {
        background-image: url("../images/bg_bubble-sp.png");
        background-size: cover;
        height: 200%;
    }    
    .child .inner {
        padding-left: clamp(22px, 6.9vw, 100px);
    }
    .child .inner-title {
        font-size: clamp(2.4rem, 6.7vw, 3.2rem);
    } 
    .child .inner-subtitle {
        font-size: clamp(1.7rem, 4.6vw, 2.2rem);
    }
    .child .price-inner {
        width: 100%;
        margin: clamp(20px, 4.16vw, 40px) auto 0;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .child .price-wrapper {
        margin-top: 30px;
    }
    .child .floor-wrapper {
        gap: 6px;
    }
    .child .floor {
        font-size: clamp(1.7rem, 4.6vw, 2.2rem);
    }
    .child .num {
        font-size: clamp(1.4rem, 3.77vw, 1.8rem);
    }
    .child .total {
        font-size: clamp(2.1rem, 6.7vw, 3.2rem);
    }    
    .child .price {
        font-size: clamp(6rem, 16.34vw, 7.8rem);
    }
    .child .price span.small {
        font-size: clamp(4.2rem, 13.2vw, 6.3rem);
    }    
    .child .cost {
        font-size: clamp(2.1rem, 6.28vw, 3rem);
    }
    .child .grave-image {
        margin-top: 20px;
    }    
    .child .container.info {
        margin: 60px auto 0;
        padding: clamp(25px, 7.81vw, 60px) clamp(25px, 7.81vw, 60px) clamp(20px, 6.51vw, 50px);
        gap: 20px;
        flex-direction: column;
    }
    .child .link-container {
        margin: 40px auto 0;
        flex-direction: column;
        align-items: center;
    }
    .child .link {
        width: clamp(240px, 20.83vw, 300px);
        height: clamp(96px, 8.33vw, 120px);
        background-image: url(../images/bg_link_01.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        border: 2px solid #595DC8;
        border-radius: 10px;
        cursor: pointer;
        overflow: hidden;
    }
    .child .link:nth-of-type(2) {
        background-image: url(../images/bg_link_02.jpg);
    }
    .child .link:nth-of-type(3) {
        background-image: url(../images/bg_link_03.jpg);
    }
    .child .link a {
        font-size: clamp(1.4rem, 1.25vw, 1.8rem);
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #fff;
        text-align: center;
        width: 100%;
        height: 100%;
        background-color: rgba(89, 93, 200, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .4s;
        position: relative;
    }
    .child .link a::after {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        content: '';
        width: 16px;
        height: 16px;
        background-image: url(../images/arrow-white.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .child .link:hover a {
        background-color: rgba(89, 93, 200, 0.15);
    }
    #garden-wrapper {
        display: none;
    }
    .child .image-box.sp {
        display: block;
        width: 100%;
        max-width: 400px;
        margin: auto;
        padding: 20px clamp(48px, 4.16vw, 60px) 20px 20px;
    }
    .table-container {
        margin: 60px auto 0;
    }
    .table-title {
        font-size: clamp(1.7rem, 4.9vw, 2.2rem);
        font-weight: 500;
        letter-spacing: 0.05em;
        text-align: center;
        color: #fff;
        background-color: #595DC8;
        max-width: 800px;
        margin: auto;
        padding: 8px;
    }
    .table-subtitle {
        font-size: clamp(1.4rem, 3.92vw, 1.8rem);
        font-weight: 500;
        text-align: center;
        max-width: 800px;
        margin: 22px auto 0;
    }

    .access-title {
        font-size: clamp(1.6rem, 4.35vw, 2rem);
        padding: clamp(10px, 2.83vw, 13px) 10px clamp(10px, 2.83vw, 14px);
        margin-top: 40px;
    }
    .access-box {
        width: 100%;
        padding: clamp(24px, 6.53vw, 30px) 20px clamp(38px, 10.2vw 47px);
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .carnavi-box {
        margin-top: 30px;
    }
    .carnavi {
        font-size: clamp(1.6rem, 4.35vw, 2rem);
    }
    .carnavi::before {
        top: 20%;
        left: 0.6em;
        width: clamp(48px, 13.07vw, 60px);
        height: clamp(26px, 7.08vw, 44px);
    }
    .map-address {
        font-size: clamp(1.4rem, 3.81vw, 1.6rem);
    }
}
    

/* 280px- */
@media screen and (min-width:280px) and (max-width:599px) { 
    /*-- fixed-footer フッタータブ --*/
    #fixed-footer {
        height: 70px;
        padding: 7px 10px;
        column-gap: 15px;
    }
    #fixed-footer .image {
        display: block;
        width: 146px;
    }
    /*-- fixed-footer フッタータブ end --*/



    /*-- thanks --*/
    #thanks .mailsend {
        width: 90%;
        margin: 60px auto;
        font-size: 0.8em;
    }

}