@charset 'UTF-8';

/*
	repair_work page style
*/

/* common */

/* sp setting */
@media only screen and (max-width: 767px)
{
    /* kv */
    .kv .box
    {
        position: relative;

        height: 60px;

        background: #e25a12;
    }

    .kv .title
    {
        position: absolute;
        right: 5%;
        bottom: 35%;

        display: block;

        width: 20%;
    }

    /* catchcopy */
    .catchcopy
    {
        background: url('../img/common/bg_line_03_top.png'), url('../img/common/bg_line_03_bottom.png');
        background-color: #fcf5f0;
        background-repeat: repeat-x, repeat-x;
        background-position: left top, left bottom;
        background-size: 15px auto, 15px auto;
    }

    .catchcopy .inner
    {
        padding: 50px 0;

        text-align: center;
    }

    .catchcopy .lead
    {
        width: 86%;
        margin: 0 auto;
    }

    .catchcopy .btn
    {
        width: 80%;
        margin: 30px auto 0 auto;
    }

    .catchcopy .btn a
    {
        line-height: 1;

        position: relative;

        display: block;

        box-sizing: border-box;
        width: 100%;
        padding: 14px 40px 14px 65px;

        color: #fff;
        background: #e25a12;
    }

    .catchcopy .btn a:before
    {
        position: absolute;
        top: 40%;
        left: 5%;

        display: block;

        width: 35px;
        height: 10px;

        content: '';

        background: url('../img/common/icon_btn_l@sp.png') left top / 100% no-repeat;
    }

    .catchcopy .btn a:after
    {
        position: absolute;
        top: 10px;
        right: 10px;

        content: url('../img/common/icon_popup.png');
    }

    /* repair */
    .repair
    {
        background: url("../img/support/bg_treatment.png") left -100px top 15px / 84% no-repeat;
    }

    .repair .inner
    {
        width: 90%;
        margin: 0 auto;
        padding: 80px 0;

        text-align: center;

        border-bottom: 1px solid #b8b092;
    }

    .repair h2
    {
        width: 80%;
        margin: 0 auto;
    }

    .repair .subtitle
    {
        font-size: 16px;
        font-weight: bold;

        display: inline-block;

        padding: 20px 0 5px;

        border-bottom: 1px solid #e25a12;
    }

    .repair .description
    {
        font-size: 12px;

        padding: 20px 0 0;
    }

    .repair .name
    {
        font-size: 12px;

        padding: 20px 0 0;
    }

    .repair .name .erection
    {
        font-size: 16px;
        font-weight: bold;

        position: relative;

        display: inline-block;

        margin-bottom: 5px;
        padding: 0 0 5px;

        border-bottom: 1px solid #e25a12;
    }

    .repair .name .erection_noborder
    {
        font-size: 16px;
        font-weight: bold;

        position: relative;

        display: inline-block;
    }

    .repair .name .construction
    {
        display: block;
    }

    .repair .date
    {
        font-size: 12px;

        padding: 20px 0 0;
    }

    .repair .date .comp
    {
        font-size: 18px;
        line-height: 1.6;

        display: block;

        width: 2.5em;
        margin: 0 auto 10px;
        padding: 0 10px 0 14px;

        letter-spacing: .2em;

        color: #e25a12;
        border: 3px solid #e25a12;
    }

    .repair .date .time
    {
        font-weight: bold;

        padding: 0 5px 0;
    }

    .repair .photo
    {
        margin: 20px 0 0;
    }

    .repair .photo .captionLeft
    {
        font-size: 10px;

        margin: 5px 0 0;

        text-align: left;
    }

    .repair .photo .captionRight
    {
        font-size: 10px;

        margin: 5px 0 0;

        text-align: right;
    }

    .repair .schedule
    {
        margin: 40px 0 0;
    }

    .repair .schedule .outBorder
    {
        padding: 3px;

        border: 1px dashed #ba960f;
    }

    .repair .schedule .innerBorder
    {
        padding: 20px 0 25px;

        border: 2px solid #ba960f;
    }

    .repair .schedule .innerBorder h3
    {
        width: 30%;
        margin: 0 auto;
    }

    .repair .schedule ul
    {
        width: 74%;
        margin: 0 auto;
        padding: 20px 0 0;
    }

    .repair .schedule ul li:last-child
    {
        padding: 20px 0 0;
    }

    .repair .schedule ul li p
    {
        font-size: 12px;

        padding: 20px 0 0;
    }

    .repair .schedule ul li p span
    {
        font-weight: bold;
    }

    /* each style */
    .l-repair01 .inner
    {
        padding: 80px 0;
    }

    .l-repair01 .photo div:first-child,
    .l-repair02 .photo div:first-child
    {
        margin: 0 0 10px;
    }

    .l-repair03 .box:not(:first-of-type)
    {
        margin: 50px auto 0;

        border-top: 1px solid #ccc;
    }

    .l-repair05 .name span,
    .l-repair06 .name span,
    .l-repair07 .name span
    {
        padding: 0;
    }

    .l-repair05 .name span:after,
    .l-repair06 .name span:after,
    .l-repair07 .name span:after
    {
        display: none;
    }

    .l-repair08 .inner
    {
        border: none;
    }

    /* contactBox */
    .contactBox .inner
    {
        margin: 0;
    }
}

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape)
{
}

/* tb setting */
@media screen and (min-width: 768px) and (max-width: 1024px)
{
    /* kv */
    .kv .box
    {
        position: relative;

        height: 60px;

        background: #e25a12;
    }

    .kv .title
    {
        position: absolute;
        right: 5%;
        bottom: 35%;

        display: block;

        width: 20%;
    }

    /* catchcopy */
    .catchcopy
    {
        background: url('../img/common/bg_line_03_top.png'), url('../img/common/bg_line_03_bottom.png');
        background-color: #fcf5f0;
        background-repeat: repeat-x, repeat-x;
        background-position: left top, left bottom;
        background-size: 15px auto, 15px auto;
    }

    .catchcopy .inner
    {
        padding: 50px 0;

        text-align: center;
    }

    .catchcopy .lead
    {
        width: 60%;
        margin: 0 auto;
    }

    .catchcopy .btn
    {
        width: 60%;
        margin: 30px auto 0 auto;
    }

    .catchcopy .btn a
    {
        line-height: 1;

        position: relative;

        display: block;

        box-sizing: border-box;
        width: 100%;
        padding: 14px 40px 14px 65px;

        color: #fff;
        background: #e25a12;
    }

    .catchcopy .btn a:before
    {
        position: absolute;
        top: 40%;
        left: 5%;

        display: block;

        width: 35px;
        height: 10px;

        content: '';

        background: url('../img/common/icon_btn_l@sp.png') left top / 100% no-repeat;
    }

    .catchcopy .btn a:after
    {
        position: absolute;
        top: 10px;
        right: 10px;

        content: url('../img/common/icon_popup.png');
    }

    /* repair */
    .repair
    {
        background: url("../img/support/bg_treatment.png") left -100px top 15px / 84% no-repeat;
    }

    .repair .inner
    {
        width: 90%;
        margin: 0 auto;
        padding: 80px 0;

        text-align: center;

        border-bottom: 1px solid #b8b092;
    }

    .repair h2
    {
        width: 50%;
        margin: 0 auto;
    }

    .repair .subtitle
    {
        font-size: 16px;
        font-weight: bold;

        display: inline-block;

        padding: 20px 0 5px;

        border-bottom: 1px solid #e25a12;
    }

    .repair .description
    {
        font-size: 12px;

        padding: 20px 0 0;
    }

    .repair .name
    {
        font-size: 12px;

        padding: 20px 0 0;
    }

    .repair .name .erection
    {
        font-size: 16px;
        font-weight: bold;

        position: relative;

        display: inline-block;

        margin-bottom: 5px;
        padding: 0 0 5px;

        border-bottom: 1px solid #e25a12;
    }

    .repair .name .erection_noborder
    {
        font-size: 16px;
        font-weight: bold;

        position: relative;

        display: inline-block;
    }

    .repair .name .construction
    {
        display: block;
    }

    .repair .date
    {
        font-size: 12px;

        padding: 20px 0 0;
    }

    .repair .date .comp
    {
        font-size: 18px;
        line-height: 1.6;

        display: block;

        width: 2.5em;
        margin: 0 auto 10px;
        padding: 0 10px 0 14px;

        letter-spacing: .2em;

        color: #e25a12;
        border: 3px solid #e25a12;
    }

    .repair .date .time
    {
        font-weight: bold;

        padding: 0 5px 0;
    }

    .repair .photo
    {
        margin: 20px 0 0;
    }

    .repair .photo .captionLeft
    {
        font-size: 10px;

        margin: 5px 0 0;

        text-align: left;
    }

    .repair .photo .captionRight
    {
        font-size: 10px;

        margin: 5px 0 0;

        text-align: right;
    }

    .repair .schedule
    {
        margin: 40px 0 0;
    }

    .repair .schedule .outBorder
    {
        padding: 3px;

        border: 1px dashed #ba960f;
    }

    .repair .schedule .innerBorder
    {
        padding: 20px 40px 25px;

        border: 2px solid #ba960f;
    }

    .repair .schedule .innerBorder h3
    {
        width: 20%;
        margin: 0 auto;
    }

    .repair .schedule ul
    {
        display: flex;

        padding: 40px 0 0;

        justify-content: space-between;
    }

    .repair .schedule ul li
    {
        width: 44%;
    }

    .repair .schedule ul li p
    {
        font-size: 12px;

        padding: 20px 0 0;
    }

    .repair .schedule ul li p span
    {
        font-weight: bold;
    }

    /* each style */
    .l-repair01 .inner
    {
        padding: 80px 0;
    }

    .l-repair01 .photo div:first-child,
    .l-repair02 .photo div:first-child
    {
        margin: 0 0 10px;
    }

    .l-repair03 .box:not(:first-of-type)
    {
        margin: 50px auto 0;

        border-top: 1px solid #ccc;
    }

    .l-repair05 .name span,
    .l-repair06 .name span,
    .l-repair07 .name span
    {
        padding: 0;
    }

    .l-repair05 .name span:after,
    .l-repair06 .name span:after,
    .l-repair07 .name span:after
    {
        display: none;
    }

    .l-repair08 .inner
    {
        border: none;
    }

    /* contactBox */
    .contactBox .inner
    {
        margin: 0;
    }
}

/* pc setting */
@media screen and (min-width: 1025px)
{
    /* logo */
    .logo
    {
        position: absolute;
        top: 40px;
        left: 30px;
    }

    /* kv */
    .kv
    {
        background: #e25a12;
    }

    .kv .inner
    {
        position: relative;

        display: flex;

        width: 100%;
    }

    .kv .photo
    {
        position: relative;

        overflow: hidden;

        width: 84%;
        height: 600px;
    }

    .kv .photo img
    {
        position: relative;
        left: 50%;

        transform: translateX(-50%);
    }

    .kv .box
    {
        position: relative;

        width: 16%;
        height: 600px;

        background: #e25a12;
    }

    .kv .title
    {
        position: absolute;
        top: 50%;

        width: 130px;
        height: 360px;
        margin-top: -267px;
        margin-left: -65px;
    }

    /* catchcopy */
    .catchcopy
    {
        background: url('../img/common/bg_line_03_top.png'), url('../img/common/bg_line_03_bottom.png');
        background-repeat: repeat-x, repeat-x;
        background-position: left top, left bottom;
    }

    .catchcopy .inner
    {
        padding: 140px 0;

        text-align: center;
    }

    .catchcopy .btn
    {
        width: 535px;
        margin: 50px auto 0 auto;
    }

    .catchcopy .btn a
    {
        line-height: 1;

        position: relative;

        display: table-cell;

        width: 535px;
        height: 70px;

        text-align: center;
        vertical-align: middle;
        letter-spacing: .15em;

        background: #e25a12;
    }

    .catchcopy .btn a:hover
    {
        opacity: .8;
    }

    .catchcopy .btn a:before
    {
        position: absolute;
        top: 35%;
        left: -52px;

        content: url('../img/common/icon_btn_l.png');
    }

    .catchcopy .btn a:after
    {
        position: absolute;
        top: 10px;
        right: 10px;

        content: url('../img/common/icon_popup.png');
    }

    /* repair */
    .repair .inner
    {
        padding: 140px 0 100px 0;

        text-align: center;

        border-bottom: 1px solid #b8b092;
        background: url('../img/support/bg_treatment.png') left top 95px no-repeat;
    }

    .repair .subtitle
    {
        font-size: 22px;
        font-weight: bold;

        display: inline-block;

        padding: 50px 0 10px;

        border-bottom: 1px solid #e25a12;
    }

    .repair .description
    {
        font-size: 18px;

        padding: 20px 0 0;
    }

    .repair .name
    {
        font-size: 18px;

        padding: 50px 0 0;
    }

    .repair .name .erection,
    .repair .name .erection_noborder
    {
        font-size: 22px;
        font-weight: bold;
    }

    .repair .name .construction
    {
        position: relative;

        padding: 0 0 0 50px;
    }

    .repair .name .construction:before
    {
        position: absolute;
        top: 50%;
        left: 10px;

        display: inline-block;

        width: 30px;
        height: 1px;

        content: '';

        border-bottom: 1px solid #e25a12;
    }

    .repair .date
    {
        font-size: 16px;

        padding: 20px 0 0;
    }

    .repair .date .comp
    {
        font-size: 24px;
        line-height: 1.6;

        display: inline-block;

        margin: 0 20px 0 0;
        padding: 0 10px 0 14px;

        letter-spacing: .2em;

        color: #e25a12;
        border: 3px solid #e25a12;
    }

    .repair .date .time
    {
        font-weight: bold;

        padding: 0 5px 0;
    }

    .repair .photo
    {
        display: flex;

        margin: 50px 0 0;

        justify-content: space-between;
    }

    .repair .photo .captionLeft,
    .repair .photo .captionRight
    {
        display: none;
    }

    .repair .schedule
    {
        margin: 100px 0 0;
    }

    .repair .schedule .outBorder
    {
        padding: 3px;

        border: 1px dashed #ba960f;
    }

    .repair .schedule .innerBorder
    {
        padding: 50px 175px 70px;

        border: 2px solid #ba960f;
    }

    .repair .schedule ul
    {
        display: flex;

        padding: 40px 0 0;

        justify-content: space-between;
    }

    .repair .schedule ul li p
    {
        font-size: 16px;

        padding: 20px 0 0;
    }

    .repair .schedule ul li p span
    {
        font-weight: bold;
    }

    /* each style */
    .l-repair01 .inner
    {
        padding: 190px 0 140px;
    }
    .l-repair03 .box
    {
        width: 920px;
        margin: 0 auto;
    }

    .l-repair03 .box .photo,
    .l-repair04 .photo,
    .l-repair05 .photo,
    .l-repair06 .photo,
    .l-repair07 .photo,
    .l-repair08 .photo
    {
        justify-content: center;
    }

    .l-repair03 .box:not(:first-of-type)
    {
        margin: 100px auto 0;

        border-top: 1px solid #ccc;
    }

    .l-repair05 .name span,
    .l-repair06 .name span,
    .l-repair07 .name span
    {
        padding: 0;
    }

    .l-repair05 .name span:after,
    .l-repair06 .name span:after,
    .l-repair07 .name span:after
    {
        display: none;
    }

    .l-repair08 .inner
    {
        border: none;
    }

    /* contactBox */
    .contactBox .inner
    {
        margin-top: 0;
        padding-bottom: 130px;
    }
}