@charset 'UTF-8';

/*
	supportpage 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
    {
        padding: 70px 0;

        text-align: center;

        background: url('../img/support/bg_support@sp.png') right center / contain no-repeat;
    }

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

    /* letterOfIntentBox */
    .letterOfIntentBox
    {
        padding: 50px 0;

        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;
    }

    .letterOfIntentBox .inner
    {
        width: 90%;
        margin: 0 auto;

        background: #fff;
    }

    .letterOfIntentBox .title
    {
        width: 64%;
        margin: 0 auto;
        padding: 15% 0 0;
    }

    .letterOfIntentBox .photo
    {
        width: 36%;
        margin: 0 auto;
        padding: 10% 0 0;
    }

    .letterOfIntentBox .name
    {
        width: 24%;
        margin: 0 auto;
        padding: 5% 0 0;
    }

    .letterOfIntentBox .body
    {
        font-size: 12px;
        line-height: 2;

        padding: 20% 5% 0 5%;

        background: url('../img/common/bg_line_01.png') left top 20px / 60% repeat-x;
    }

    .letterOfIntentBox .body p
    {
				/*display: block;*/
					padding-bottom:  30px;
    }

    .letterOfIntentBox .body .endSentence
    {
        display: block;

        padding: 1em 0 0;

        text-align: right;
    }

    .letterOfIntentBox .letterBtn
    {
        width: 50px;
        height: 20px;
        margin: 0 auto;
        padding: 0 0 20px;

        text-indent: -9999px;

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

    .letterOfIntentBox .letterBtn.open
    {
        background: url('../img/common/icon_letter_close.png') left top / 100% no-repeat;
    }

    /* treatmentBox */
    .treatmentBox
    {
        padding: 0 0 40px;
    }

    .treatmentBox .inner
    {
        background: url('../img/support/bg_treatment.png') left 10% top 20px / 80% no-repeat;
    }

    .treatmentBox .title
    {
        width: 64%;
        margin: 0 auto;
        padding: 40px 0 0;

        text-align: center;
    }

    .treatmentBox .lead
    {
        width: 74%;
        margin: 40px auto 0;

        text-align: center;
    }

    .treatmentBox table
    {
        width: 100%;
    }

    .treatmentBox .tableWrap
    {
        margin: 40px 0 0;
    }

    .treatmentBox table
    {
        font-size: 13px;
        font-weight: bold;

        width: 94%;
        margin: 0 auto;

        border-collapse: collapse;

        color: #fff;
    }

    .treatmentBox table th,
    .treatmentBox table td
    {
        line-height: 1.2;

        padding: 10px 0;

        text-align: center;

        border: 1px solid #fff;
    }

    .treatmentBox table th span,
    .treatmentBox table td span
    {
        display: inline-block;

        width: 1em;
    }

    .treatmentBox table th span.line2
    {
        font-size: 12px;

        width: 2em;
        padding: 0 4px;

        text-align: left;
        white-space: nowrap;
        -ms-writing-mode: tb-lr;

            writing-mode: vertical-rl;
    }

    .treatmentBox table thead .gold
    {
        background: #a98446;
    }

    .treatmentBox table thead .green
    {
        background: #61aa31;
    }

    .treatmentBox table thead .pink
    {
        background: #d60056;
    }

    .treatmentBox table thead .purple
    {
        background: #4f0b71;
    }

    .treatmentBox table tbody th
    {
        background: #6e0014;
    }

    .treatmentBox table tbody td
    {
        font-size: 2rem;
    }

    .treatmentBox table tbody .green
    {
        background: #b0d598;
    }

    .treatmentBox table tbody .pink
    {
        background: #eb80ab;
    }

    .treatmentBox table tbody .purple
    {
        background: #a785b8;
    }

    /* .summaryBox  */
    .summaryBox
    {
        background: #f6f1df;
    }

    .summaryBox .inner
    {
        padding: 0 0 40px;

        background: url('../img/support/bg_treatment.png') left 10% top 20px / 80% no-repeat;
    }

    .summaryBox .title
    {
        width: 64%;
        margin: 0 auto;
        padding: 40px 0 0;

        text-align: center;
    }

    .summaryBox .amount
    {
        width: 50%;
        margin: 0 auto;
        padding: 40px 0 0;

        text-align: center;
    }

    .summaryBox .list
    {
        width: 90%;
        margin: 0 auto;
        padding: 40px 0 0;

        text-align: center;
    }

    .summaryBox .note
    {
        width: 90%;
        margin: 0 auto;
    }

    .summaryBox .note li
    {
        font-size: 14px;
        line-height: 1.6;

        padding: 1em 0 0 2em;

        text-indent: -2em;
    }

    .summaryBox .note li p
    {
        font-size: 12px;

        padding: 10px 0 0 1em;

        text-indent: -1em;
    }

    .summaryBox .note li ul
    {
        display: inline-block;

        margin: 1em 0 0;
        padding: .8em;

        border: 1px solid #000;
    }

    .summaryBox .note li ul li
    {
        padding: 0;

        text-indent: 0;
    }

    .summaryBox .note li ul li:not(:first-child)
    {
        padding: 5px 0 0;
    }

    .summaryBox .note li ul li .head
    {
        display: inline-block;

        width: 5em;
    }

    .summaryBox .note li ul li .number
    {
        font-size: 20px;
    }

    .summaryBox .anchor
    {
        width: 80%;
        margin: 0 auto;
        padding: 20px 0 0;
    }

    .summaryBox .anchor li
    {
        display: block;
    }

    .summaryBox .anchor li:last-child
    {
        margin-top: 20px;
    }

    .summaryBox .anchor li a
    {
        font-size: 13px;

        position: relative;

        display: block;

        box-sizing: border-box;
        width: 100%;
        padding: 8px 0 8px 20px;

        text-align: center;
        vertical-align: middle;

        color: #fff;
        background: #e25a12;
    }

    .summaryBox .anchor li a:hover
    {
        opacity: .8;
    }

    .summaryBox .anchor li 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;
    }

    .summaryBox .anchor li a:after
    {
        margin: 0 0 0 5px;

        content: url('../img/common/icon_pdf@sp.png');
        vertical-align: sub;
    }

    .summaryBox .anchor li a:hover
    {
        opacity: .8;
    }

    .summaryBox .anchor li a img
    {
        vertical-align: top;
    }

    /* 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
    {
        padding: 100px 0;

        text-align: center;

        background: url('../img/support/bg_support@sp.png') right center / contain no-repeat;
    }

    .catchcopy .inner
    {
        width: 40%;
        margin: 0 auto;
    }

    /* letterOfIntentBox */
    .letterOfIntentBox
    {
        padding: 50px 0;

        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;
    }

    .letterOfIntentBox .inner
    {
        width: 90%;
        margin: 0 auto;

        background: #fff;
    }

    .letterOfIntentBox .title
    {
        width: 40%;
        margin: 0 auto;
        padding: 15% 0 0;
    }

    .letterOfIntentBox .photo
    {
        width: 20%;
        margin: 0 auto;
        padding: 10% 0 0;
    }

    .letterOfIntentBox .name
    {
        width: 14%;
        margin: 0 auto;
        padding: 5% 0 0;
    }

    .letterOfIntentBox .body
    {
        font-size: 14px;
        line-height: 2;

        padding: 20% 5% 0 5%;

        background: url('../img/common/bg_line_01.png') left top 20px / 60% repeat-x;
    }

    .letterOfIntentBox .body p
    {
        display: none;
    }

    .letterOfIntentBox .body .endSentence
    {
        display: block;

        padding: 1em 0 0;

        text-align: right;
    }

    .letterOfIntentBox .letterBtn
    {
        width: 50px;
        height: 20px;
        margin: 0 auto;
        padding: 0 0 20px;

        text-indent: -9999px;

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

    .letterOfIntentBox .letterBtn.open
    {
        background: url('../img/common/icon_letter_close.png') left top / 100% no-repeat;
    }

    /* treatmentBox */
    .treatmentBox
    {
        padding: 0 0 40px;
    }

    .treatmentBox .inner
    {
        background: url('../img/support/bg_treatment.png') left 10% top 20px / 80% no-repeat;
    }

    .treatmentBox .title
    {
        width: 44%;
        margin: 0 auto;
        padding: 40px 0 0;

        text-align: center;
    }

    .treatmentBox .lead
    {
        width: 56%;
        margin: 40px auto 0;

        text-align: center;
    }

    .treatmentBox table
    {
        width: 100%;
    }

    .treatmentBox .tableWrap
    {
        margin: 40px 0 0;
    }

    .treatmentBox table
    {
        font-size: 13px;
        font-weight: bold;

        width: 94%;
        margin: 0 auto;

        border-collapse: collapse;

        color: #fff;
    }

    .treatmentBox table th,
    .treatmentBox table td
    {
        line-height: 1.2;

        padding: 10px 0;

        text-align: center;

        border: 1px solid #fff;
    }

    .treatmentBox table thead .gold
    {
        background: #a98446;
    }

    .treatmentBox table thead .green
    {
        background: #61aa31;
    }

    .treatmentBox table thead .pink
    {
        background: #d60056;
    }

    .treatmentBox table thead .purple
    {
        background: #4f0b71;
    }

    .treatmentBox table tbody th
    {
        background: #6e0014;
    }

    .treatmentBox table tbody td
    {
        font-size: 2rem;
    }

    .treatmentBox table tbody .green
    {
        background: #b0d598;
    }

    .treatmentBox table tbody .pink
    {
        background: #eb80ab;
    }

    .treatmentBox table tbody .purple
    {
        background: #a785b8;
    }

    /* .summaryBox  */
    .summaryBox
    {
        background: #f6f1df;
    }

    .summaryBox .inner
    {
        padding: 0 0 40px;

        background: url('../img/support/bg_treatment.png') left 10% top 20px / 80% no-repeat;
    }

    .summaryBox .title
    {
        width: 44%;
        margin: 0 auto;
        padding: 40px 0 0;

        text-align: center;
    }

    .summaryBox .amount
    {
        width: 30%;
        margin: 0 auto;
        padding: 40px 0 0;

        text-align: center;
    }

    .summaryBox .list
    {
        width: 90%;
        margin: 0 auto;
        padding: 40px 0 0;

        text-align: center;
    }

    .summaryBox .note
    {
        width: 90%;
        margin: 0 auto;
    }

    .summaryBox .note li
    {
        font-size: 14px;
        line-height: 1.6;

        padding: 1em 0 0 2em;

        text-indent: -2em;
    }

    .summaryBox .note li p
    {
        font-size: 12px;

        padding: 10px 0 0 1em;

        text-indent: -1em;
    }

    .summaryBox .note li ul
    {
        display: inline-block;

        margin: 1em 0 0;
        padding: .8em;

        border: 1px solid #000;
    }

    .summaryBox .note li ul li
    {
        padding: 0;

        text-indent: 0;
    }

    .summaryBox .note li ul li:not(:first-child)
    {
        padding: 5px 0 0;
    }

    .summaryBox .note li ul li .head
    {
        display: inline-block;

        width: 5em;
    }

    .summaryBox .note li ul li .number
    {
        font-size: 20px;
    }

    .summaryBox .anchor
    {
        width: 80%;
        margin: 0 auto;
        padding: 20px 0 0;
    }

    .summaryBox .anchor li
    {
        display: block;
    }

    .summaryBox .anchor li:last-child
    {
        margin-top: 20px;
    }

    .summaryBox .anchor li a
    {
        font-size: 13px;

        position: relative;

        display: block;

        box-sizing: border-box;
        width: 100%;
        padding: 8px 0 8px 20px;

        text-align: center;
        vertical-align: middle;

        color: #fff;
        background: #e25a12;
    }

    .summaryBox .anchor li a:hover
    {
        opacity: .8;
    }

    .summaryBox .anchor li 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;
    }

    .summaryBox .anchor li a:after
    {
        margin: 0 0 0 5px;

        content: url('../img/common/icon_pdf@sp.png');
        vertical-align: sub;
    }

    .summaryBox .anchor li a:hover
    {
        opacity: .8;
    }

    .summaryBox .anchor li a img
    {
        vertical-align: top;
    }

    /* 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: -200px;
        margin-left: -65px;
    }

    /* catchcopy */
    .catchcopy
    {
        padding: 140px 0;

        text-align: center;

        background: url('../img/support/bg_support.png') right center no-repeat;
    }

    /* letterOfIntentBox */
    .letterOfIntentBox
    {
        padding: 130px 0 230px;

        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;
    }

    .letterOfIntentBox .inner
    {
        background: #fff;
    }

    .letterOfIntentBox .title
    {
        padding: 100px 100px 0 100px;

        text-align: center;
    }

    .letterOfIntentBox .photo
    {
        padding: 45px 100px 0 100px;

        text-align: center;
    }

    .letterOfIntentBox .name
    {
        padding: 20px 100px 0 100px;

        text-align: center;
    }

    .letterOfIntentBox .body
    {
        font-size: 18px;
        line-height: 2;

        margin: 50px 0 0;
        padding: 100px;

        background: url('../img/common/bg_line_01.png') left top repeat-x;
    }

    .letterOfIntentBox .body .endSentence
    {
        display: block;

        padding: 1em 0 0;

        text-align: right;
    }

    .letterOfIntentBox .letterBtn
    {
        display: none;
    }

    /* treatmentBox */
    .treatmentBox
    {
        padding: 0 0 200px;
    }

    .treatmentBox .inner
    {
        background: url('../img/support/bg_treatment.png') left top 95px no-repeat;
    }

    .treatmentBox .title
    {
        padding: 100px 0 0;

        text-align: center;
    }

    .treatmentBox .lead
    {
        padding: 100px 0 0;

        text-align: center;
    }

    .treatmentBox table
    {
        width: 100%;
    }

    .treatmentBox .tableWrap
    {
        margin: 90px 0 0;
    }

    .treatmentBox table
    {
        font-size: 16px;

        border-collapse: collapse;

        color: #fff;
    }

    .treatmentBox table th
    {
        padding: 20px 0;

        text-align: center;

        border: 1px solid #fff;
    }

    .treatmentBox table td
    {
        width: 150px;
        height: 150px;

        text-align: center;

        border: 1px solid #fff;
    }

    .treatmentBox table thead .gold
    {
        background: #a98446;
    }

    .treatmentBox table thead .green
    {
        background: #61aa31;
    }

    .treatmentBox table thead .pink
    {
        background: #d60056;
    }

    .treatmentBox table thead .purple
    {
        background: #4f0b71;
    }

    .treatmentBox table tbody th
    {
        background: #6e0014;
    }

    .treatmentBox table tbody td
    {
        font-size: 2rem;
    }

    .treatmentBox table tbody .green
    {
        background: #b0d598;
    }

    .treatmentBox table tbody .pink
    {
        background: #eb80ab;
    }

    .treatmentBox table tbody .purple
    {
        background: #a785b8;
    }

    /* .summaryBox  */
    .summaryBox
    {
        background: #f6f1df;
    }

    .summaryBox .inner
    {
        padding: 0 0 200px;

        background: url('../img/support/bg_treatment.png') left top 95px no-repeat;
    }

    .summaryBox .title
    {
        padding: 200px 0 0;

        text-align: center;
    }

    .summaryBox .amount
    {
        padding: 50px 0 0;

        text-align: center;
    }

    .summaryBox .list
    {
        padding: 50px 0 0;

        text-align: center;
    }

    .summaryBox .note
    {
    }

    .summaryBox .note li
    {
        font-size: 18px;
        line-height: 1.6;

        padding: 40px 0 0 2em;

        text-indent: -2em;
    }

    .summaryBox .note li p
    {
        font-size: 12px;

        padding: 10px 0 0 2em;

        text-indent: -2em;
    }

    .summaryBox .note li ul
    {
        display: inline-block;

        margin: 20px 0 0;
        padding: 20px;

        border: 1px solid #000;
    }

    .summaryBox .note li ul li
    {
        padding: 0;

        text-indent: 0;
    }

    .summaryBox .note li ul li:not(:first-child)
    {
        padding: 20px 0 0;
    }

    .summaryBox .note li ul li .head
    {
        display: inline-block;

        width: 5em;
    }

    .summaryBox .note li ul li .number
    {
        font-size: 26px;
    }

    .summaryBox .anchor
    {
        padding: 50px 0 0;
    }

    .summaryBox .anchor li
    {
        display: inline-block;
    }

    .summaryBox .anchor li:first-child
    {
        margin: 0 0 0 52px;
    }

    .summaryBox .anchor li:last-child
    {
        margin: 0 0 0 102px;
    }

    .summaryBox .anchor li a
    {
        font-size: 20px;

        position: relative;

        display: table-cell;

        width: 500px;
        height: 70px;

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

        color: #fff;
        background: #e25a12;
    }

    .summaryBox .anchor li a:hover
    {
        opacity: .8;
    }

    .summaryBox .anchor li a:before
    {
        position: absolute;
        top: 20%;
        left: -52px;

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

    .summaryBox .anchor li a:after
    {
        margin: 0 0 0 10px;

        content: url('../img/common/icon_pdf.png');
        vertical-align: sub;
    }

    .summaryBox .anchor li a:hover
    {
        opacity: .8;
    }

    .summaryBox .anchor li a img
    {
        vertical-align: top;
    }

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