/* 600px - 959px */
@media screen and (min-width:280px) and (max-width:959px) {
    #header .header_inner {
        width: 100%;
        align-items: center;
    }
    h1 {
        display: none;
    }
    #header .header-logo {
        padding: 0;
        margin-right: 20px;
    }
    #header .phone {
        margin: 0;
    }
    #header .phone img {
        width: 95%;
        max-width: 280px;
    }
    #header .phone a {
        display: block;
    }
    #header .request span {
        font-size: 0.7em;
    }
    #header .request{
        padding-top: 7px;
    }
}

/* 300px - 767px */
@media screen and (min-width:280px) and (max-width:767px) {
    #header {
        height: 70px;
    }
    #header .header_inner {
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        padding-left: 10px;
    }
    #header .header-logo {
        width: calc(((144 / 368)* 100) * 1vw);
        margin-right: 0;
    }
    #header .phone {
        display: none;
    }
    #header .request {
        display: none;
    }

    .openbtn {
        max-width: 20%;
        height: 70px;
        position: fixed;
        right: 0;
    }
    .openbtn span:nth-of-type(1) {
        top: 24px;
        left: 18px;
    }
    .openbtn span:nth-of-type(2) {
        top: 36px;
        left: 18px;
    }
    .openbtn span:nth-of-type(3) {
        top: 48px;
        left: 18px;
    }
    .openbtn.active span:nth-of-type(1) {
        top: 25px;
        left: 18px;
        background: #fff;
    }
    .openbtn.active span:nth-of-type(3) {
        top: 36px;
        left: 18px;
        background: #fff;
    }
    .present h3 {
        width: 100%;
        max-width: 700px;
    }
    .present .box-001 {
        width: 100%;
        max-width: 700px;
        height: auto;
        padding: 20px clamp(24px, 7.1vw, 55px);
    }
    .present .btn {
        width: 100%;
        margin-top: 30px;
        padding: 15px 0;
    }
    #contact .phone img {
        width: 80%;
    }

    /*-- fixed-footer フッタータブ --*/
    /* #fixed-footer {
        height: 90px;
        padding: 7px 10px;
        column-gap: 15px;
    } */
    /* #fixed-footer .image {
        display: block;
        width: 146px;
    } */
    /*-- fixed-footer フッタータブ end --*/

    .wrapper {
        padding: 60px 20px;
    }


    /*-- index --*/
    .topmain {
        margin-top: 70px;
    }
    .topmain div picture {
        width: 100%;
        aspect-ratio: 368 / 234;
    }
    #index .block {
        padding: 40px 20px;
    }
    #index .block::before {
        width: clamp(92px, 28.5vw, 219px);
        height: clamp(80px, 25.1vw, 193px);
    }
    #index .block::after {
        width: clamp(120px, 37.2vw, 286px);
        height: clamp(90px, 27.8vw, 214px);
    }
    #index .block-002,
    #index .block-003,
    #index .block-004 {
        margin-top: 60px;
    }
    #index .block.block-002::after,
    #index .block.block-003::after,
    #index .block.block-004::after {
        width: clamp(120px, 37.2vw, 286px);
        height: clamp(112px, 34.7vw, 267px);
    }
    #index h2 {
        font-size: clamp(2.4rem, 4.1vw, 3.2rem);
    }
    #index h3 {
        font-size: clamp(1.8rem, 2.8vw, 2.2rem);
    }
    #index .inner {
        display: block;
    }
    #index .left {
        width: 100%;
        max-width: 100%;
    }
    #index .right {
        width: 100%;
        padding-left: 0;
    }
    #index .right p.t-003 {
        font-size: clamp(1.6rem, 2.3vw, 1.8rem);
        margin-top: 30px;
    }
    #index .btn {
        width: 90%;
        padding: 15px 0;
        margin-top: 40px;
    }
    #index .btn span {
        font-size: clamp(1.6rem, 2.3vw, 1.8rem);
    }    
    /*-- news --*/
    #index .news {
        width: 100%;
        padding: 50px 0px;
        background-position: center;
        background-size: cover;
        margin-bottom: 0px;
    }
    #index .news .box-001 {
        width: 90%;
        padding: 30px;
    }
    #index .news h2 {
        font-size: clamp(2rem, 3.2vw, 2.5rem);
    }
    #index .news dl dd {
        font-size: clamp(1.5rem, 2vw, 1.6rem);
        padding: 10px 0px 30px;
    }
    #index .news dl dt {
        padding: 0 0 10px;
        position: static;
        border-bottom: none;
    }
    #index .news p.subtext {
        font-size: clamp(1.4rem, 2vw, 1.6rem);
        margin-top: 16px;
    }

    /*-- jumokuso --*/
    /*-- eitaibo --*/
    /*-- feature --*/
    /*-- access --*/
    /*-- goshibo --*/
    /*-- inquiry --*/
    #jumokuso .main,
    #eitaibo .main,
    #goshibo .main,
    #feature .main,
    #access .main,
    #inquiry .main {
        margin-top: 70px;
    }
}



/* 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 --*/

    /*-- header --*/
    .pc-only {
        display: none;
    }
    .sp-only {
        display: block;
    }
    #g-nav ul {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    /*-- banner --*/
    .banner {
        padding: 20px 0px;
    }
    .banner li img {
        width: 70%;
        margin-top: 20px;
        margin: 10px;
    }

    /*-- footer --*/
    .footer {
        padding: 40px 0px 100px;
    }
    .footer ul.footer-link {
        text-align: center;
        margin: 0px auto 40px;
        line-height: 3.5;
        letter-spacing: 1px;
        font-size: 13px;
        line-height: calc(26 / 12);
    }
    .footer p.footer-text-004 {
        margin: 0px auto;
        font-size: 13px;
    }


    .box-inner {
        padding: 40px 20px;
    }
    .inner-box-001 figure {
        margin-top: 20px;
    }
    #access .box-inner {
        padding: 40px 20px 100px;
    }
    .inner-box-001,
    .inner-box-002 {
        display: block;
        margin-top: 30px;
    }
    .inner-box-001 div {
        margin-top: 30px;
    }
    .inner-box-003 {
        display: block;
        margin-top: 60px;
    }
    p.t-002 {
        margin-top: 20px;
    }
    p.t-003 {
        margin-top: 20px;
    }    
    p.t-004 {
        margin-top: 20px;
    }    
    .block-001 .box-inner h2 {
        margin: 40px auto 0;
        padding: clamp(12px, 2.6vw, 16px) 10px clamp(8px, 2vw, 12px);
        line-height: calc(26 / 18);
    }
    .desc-list {
        margin-top: 20px;
    }
    .annotation-box {
        padding: 13px 12px 0;
    }

    /* eitaibo */
    #eitaibo .pricebox-inner {
        margin-top: 10px;
    }
    
    /*-- feature --*/
    #feature .box-overview {
        padding: 25px 20px;
        flex-direction: column;
        margin: 30px auto 0;
    }
    #feature table.overview {
        max-width: 100%;
        width: 100%;
    }
    #feature table.overview tr {
        border-bottom: none;
    }
    #feature table th,
    #feature table td {
        display: block;
    }
    #feature table.overview th,
    #feature table.overview td {
        width: 100%;
        text-align: center;
        letter-spacing: 0;
        line-height: calc(18 / 14);
    }
    #feature table.overview td {
        padding: 10px 0;
    }
    #feature table.overview th.title {
        letter-spacing: 0;
        background-color: rgb(228, 179, 110);
        color: #fff;
        padding: 8px 10px;
    }
    #feature table.overview th {
        background-color: #d5cbcb;
        color: #333;
        padding: 6px 0;
    }

    /*-- access --*/
    #access .block-001 .p-002 {
        width: 95%;
        margin: 20px auto 5px;
    }
    #access .carnavi-box {
        margin-top: 20px;
    }    
    #access .carnavi-inner {
        flex-direction: column;
    }
    #access .carnavi {
        padding: 16px 10px 20px;
        margin-left: 0;
    }
    .googlemap {
        margin-top: 20px;
    }
    #access iframe {
        width: 100%;
        margin: 0 auto 0;
    }

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

}