@import url(./styles.css);

/* シングルページの固定ヘッダー用CSS */
@media screen and (min-width: 750px) {
    .ly_header_inner {
        height: 90px;
        background-color: var(--red);
        padding-top: 0;
        opacity: 1;
        z-index: 10000;

        animation: unset !important;
    }

    .el_header_logo {
        opacity: 1;
    }
    
}

/* =========================================== */
/* メイン */

.main_wrapper {
    margin-top: 50px;
}

.ly_repairtop {
    height: 50vh;
    position: relative;
}

.el_repairtop {
    padding-left: 0vw;
    padding-bottom: 0vw;
    width: 100%;
    height: 40vw;
}

.el_repairtop h1 {
    font-size: clamp(3em, 1vw, 4em);
    font-weight: 900;
    color: var(--grey);
    padding-left: 3vw;
    margin-bottom: 5vw;
}

.el_repairtop {
    content: "";
    display: block;
    background-image: url(../images/repair_topimage_PC.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 25vh;
    min-height: 30vh;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.el_repair_topdesc {
    width: 90vw;
    height: auto;
    margin: 0 auto;
    transform: unset;
    padding-top: 20vh;
}

@media screen and (min-width: 750px){
    .main_wrapper {
        margin-top: 90px;
    }

    /* メイン上部 */
    .el_repairtop {
        padding-left: 5vw;
        padding-bottom: 10vw;
        padding-left: 0vw;
        width: 100%;
        height: 70vh;
    }
       
    .el_repairtop h1 {
        font-size: 5em;
        font-weight: 900;
    }

    .el_repair_topdesc {
        width: 50vw;
        margin: 5vw 0;
        padding-left: 5vw;
        padding-top: 0;
        display: flex;
        flex-direction: column;
    }

}

/* =========================================== */
/* 日常のお手入れ */
.ly_dailycare {
    width: 100%;
    padding-bottom: 10vw;
    margin-top: 25vw;
}

.ly_dailycare h1 {
    padding-left: 5vw;
}

.ly_dailycare_wrapper {
    margin: 0 auto;
    width: 82vw;
}

.el_dailycare_box {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 5vw;
}

.el_dailycare_image {
    width: 80vw;
    height: 50vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	margin: 30px auto 20px;
}

.dailyimage_01 {
    background-image: url(https://otsukihamono.jp/wp-content/uploads/2022/04/mentenance_before.webp);
}

.dailyimage_02 {
    background-image: url(https://otsukihamono.jp/wp-content/uploads/2022/04/mentenance_after.webp);
}

.dailyimage_03 {
    background-image: url(https://otsukihamono.jp/wp-content/uploads/2022/04/tools.webp);
}

.el_dailycare_desc {
    width: 80vw;
    padding-left: 0;
    margin-top: 2vw;
}

.el_dailycare_desc p {
    margin-top: 2vw;
}

.el_table_toisi {
    margin-top: 1vw;
    width: 70vw;
    text-align: center;
}

.el_table_toisi td {
    border: 1px solid var(--grey);
    padding: 5px;
}

@media screen and (min-width:750px){

    .ly_dailycare {
        margin-top: 15vw;
    }

    .el_dailycare_box {
        display: flex;
        margin-top: 5vw;
    }

    .el_dailycare_image {
        width: 80vw;
        height: 25vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .el_table_toisi {
        width: 50vw;
    }

}

/* =========================================== */
/* 包丁の研ぎ方 */

.ly_howtorepair {
    background-color: var(--bg-color-right);
}

.ly_howtorepair_wrapper {
    padding: 8vw 0;
}

.ly_howtorepair_box {
    width: 80vw;
    margin: 0 auto;
    border-left: 3px dotted var(--grey);
    padding-left: 5vw;
    margin-bottom: 7vw;
}

@media screen and (min-width: 750px){

    .ly_howtorepair_box {
        width: 60vw;
        margin: 0 auto;
        border-left: 3px dotted var(--grey);
        padding-left: 7vw;
        margin-bottom: 7vw;
    }
}

/* =========================================== */
/* 包丁研ぎ直しサービス */

.ly_repairservicetop {
    background-image: url(../images/repair_midimage.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 57vw;
    padding: 0;
}

.ly_repairtop_desc {
    width: 80vw;
    height: 10vw;
    background-color: none;
    margin: 20px auto;
    transform: unset;
}

.el_howtorepair_title {
    margin-bottom: 3vw;
}

@media screen and (min-width:750px) {
    .ly_repairservicetop {
        background-image: url(../images/repair_midimage.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 57vw;
    }
    
    .ly_repairtop_desc {
        width: 60vw;
        height: 10vw;
        background-color: white;
        transform: translate(2vw, -4vw);
        margin: 0;
        padding: 1em;
    }
    
    .el_howtorepair_title {
        margin-bottom: 3vw;
    }
}

/* ======================== */
/* 依頼の流れ */

.ly_requestflow {
    padding: 8vw 10vw 8vw;
    text-align: center;
}

.bl_repairservice_box {
    border: 1px solid var(--grey);
    display: block;
    padding: 2vw;
}

.bl_repairservice_wrapper {
    padding: 10vw 0;
}

.el_repairservice_wrapper {
    width: 200px;
    display: flex;
    align-items: center;
    padding: 1vw 0 2vw;
}

.el_repairservice_wrapper h3 {
    padding-left: 10px;
    font-weight: 500;
}

.el_servicedesc {
    text-align: left;
    flex: 1;
}

/* 住所ボックス */
.el_repair_adress_box {
    background-color: var(--bg-color-right);
    width: 100%;
    padding: 1vw;
    text-align: center;
    font-weight: 500;
    border-radius: 4px;
    margin-top: 20px;
}

.el_repair_adress_box h3 {
    border-bottom: 1px solid var(--bg-color-verydark);
}

.el_midline {
    width: 30px;
    height: 4vw;
    background-color: var(--bg-color-mid);
    z-index: -10;
    transform: translateX(50px);
}

@media screen and (min-width:750px){

    .ly_requestflow {
        padding: 0 10vw 8vw;
        text-align: center;
    }
    
    .bl_repairservice_box {
        border: 1px solid var(--grey);
        display: flex;
        padding: 2vw;
    }
    
    /* 住所ボックス */
    .el_repair_adress_box {
        background-color: var(--bg-color-right);
        width: 80%;
        padding: 1vw;
        text-align: center;
        font-weight: 500;
        border-radius: 4px;
        margin-top: 20px;
    }

    .bl_repairservice_wrapper {
        padding: 7vw 0;
    }    

    .el_repairservice_wrapper {
        padding: 0;
    }
}

/* ======================== */
/* 研ぎ直し料金表 */
.el_repairprice_wrapper {
    margin-top: 7vw;
}

.el_repairprice {
    width: 100%;
}

.el_repairprice ul {
    display: block;
    justify-content: center;
}

.el_repairprice li {
    line-height: 4em;
    border: 1px solid var(--bg-color-verydark);
    width: 100%;
    font-weight: 500;
    font-size: 1.5em;
    box-sizing: border-box;
}

.el_repairprice ul>li:last-child {
    margin-left: 0px;
    margin-top: -1px;
}

.el_repairprice.down {
    margin-top: -1px;
}
@media screen and (min-width:750px){
    .el_repairprice_wrapper {
        margin-top: 7vw;
    }

    .el_repairprice {
        width: 100%;
    }

    .el_repairprice ul {
        display: flex;
        justify-content: center;
    }
    
    .el_repairprice li {
        line-height: 5em;
        width: 50%;
    }

    .el_repairprice ul>li:last-child {
        margin-left: -1px;
        margin-top: 0px;
    }

    .el_repairprice.down {
        margin-top: -1px;
    }
}

/* =========================================== */
/* 研ぎ直し申し込みフォーム */

.ly_repairform {
    background-color: var(--bg-color-right);
}